By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,133 Members | 1,113 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,133 IT Pros & Developers. It's quick & easy.

Centering Images

P: n/a
Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?

Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
Heath wrote:
Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?


Depends; display:block;, display:inline-block;, display:inline;?

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2

P: n/a
Yeah sorry, the default display:block

Anne van Kesteren wrote:
Heath wrote:
Is it proper to center images in a <div> by using the text-align:
center property? Or is there a better way?


Depends; display:block;, display:inline-block;, display:inline;?


Jul 20 '05 #3

P: n/a
Heath wrote:
Yeah sorry, the default display:block


I think the default is currently a bit 'undifined' in most browsers,
since a image doesn't force a line-break like a <h2> does it? ;-)

display:inline-block; would be the correct syntax, but most browsers
probably have display:inline; with some extra rules and therefore
text-align:center; will work.

If it is true, like you said (or perhaps you did it yourself?) you will
have to use margin:0 auto; in order to center the image, since
'text-align' obviously doesn't applies to block-level elements.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #4

P: n/a


Anne van Kesteren wrote:
Heath wrote:
Yeah sorry, the default display:block

I think the default is currently a bit 'undifined' in most browsers,
since a image doesn't force a line-break like a <h2> does it? ;-)


I am really not a pro at this, much more of a hobbiest. I should have
been more clear. What I meant was that I didn't explicitly set the
display. But currently in ie 6 when I set two images within the <div>
the images do actually break strangely enough.

display:inline-block; would be the correct syntax, but most browsers
probably have display:inline; with some extra rules and therefore
text-align:center; will work.

If it is true, like you said (or perhaps you did it yourself?) you will
have to use margin:0 auto; in order to center the image, since
'text-align' obviously doesn't applies to block-level elements.


I don't know much about this, but regardless of what I set display to
the text-align centers the image without a problem. I just feel like, as
you have pointed out, it isn't a very good solution.

Jul 20 '05 #5

P: n/a
Anne van Kesteren wrote:
I think the default is currently a bit 'undifined' in most browsers,
All UA's I know default to "inline".
display:inline-block; would be the correct syntax


No, "inline" is the correct display model for images. There is no
"inline-block" in CSS 2 (and 2.1 is still a draft).

--
Spartanicus
Jul 20 '05 #6

P: n/a
Spartanicus wrote:
Anne van Kesteren wrote:

I think the default is currently a bit 'undifined' in most browsers,

All UA's I know default to "inline".

display:inline-block; would be the correct syntax

No, "inline" is the correct display model for images. There is no
"inline-block" in CSS 2 (and 2.1 is still a draft).


I know that, therefore I used 'would'. But UA (like Mozilla) treat image
differently from other elements with display:inline; applied. Take the
following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>image test</title>
<style type="text/css">
img{
height:200px;
width:600px;
}
</style>
<img src="./existing-image.png" alt=""> some inline text

Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #7

P: n/a
Anne van Kesteren wrote:
Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.


It is for replaced elements.

--
Spartanicus
Jul 20 '05 #8

P: n/a
So, I am still trying to get this centering issue figured out. I am
debating between using <img> tags in the html or background: url(); for
images.

I like the background property, because it is easier to work with (in my
opinion). But, I am having problems, because when I use it with a <div>,
<p>, or <h1> then the images stack with the boxes, which is usually
fine. Right now however I have three images that I need to line up
within a <div> container. I would like to have the left image stay on
the left, the center image stay centered, the right image flush right.

Like this:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?
Spartanicus wrote:
Anne van Kesteren wrote:

Is it normal that an inline elemnt can have a width and height specified
with CSS? No, it is not.

It is for replaced elements.


Jul 20 '05 #9

P: n/a
Oops:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------
Heath wrote:
So, I am still trying to get this centering issue figured out. I am
debating between using <img> tags in the html or background: url(); for
images.

I like the background property, because it is easier to work with (in my
opinion). But, I am having problems, because when I use it with a <div>,
<p>, or <h1> then the images stack with the boxes, which is usually
fine. Right now however I have three images that I need to line up
within a <div> container. I would like to have the left image stay on
the left, the center image stay centered, the right image flush right.

Like this:

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?
Spartanicus wrote:
Anne van Kesteren wrote:

Is it normal that an inline elemnt can have a width and height
specified with CSS? No, it is not.


It is for replaced elements.


Jul 20 '05 #10

P: n/a
Heath wrote:
Like this:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would like
to get this effect using my style sheet.

Any ideas on this?


I have left the semantics out of the following example, I think you are
smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #11

P: n/a
Anne,

Although I appreciate it, you give me too much credit. Unfortunately, I
still haven't figured out how the body>div thing works. The rest makes
sense.

BTW I am in .be, are you in .nl

Anne van Kesteren wrote:
Heath wrote:
> Like this:

-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would
like to get this effect using my style sheet.

Any ideas on this?

I have left the semantics out of the following example, I think you are
smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>


Jul 20 '05 #12

P: n/a
Quoth the raven named Heath:
Oops:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------


Try something like this. Adjust width and height to your images of course.

<div id="boxbanner">
<span class="bannerleft"><img src="smalllogo.gif" alt="" title=""
width="50" height="43" /></span>
<span class="bannerright"><img src="smalllogo.gif" alt="" title=""
width="50" height="43" /></span>
<img src="widelogo.gif" alt="" title="" width="380" height="60" />
</div>
The CSS:

#boxbanner {
border: none;
margin: 0 0 1em 0;
padding: 0;
height: 4em;
text-align: center;
width: auto;
}
..bannercenter, .bannerleft, .bannerright {
padding: 0;
position: relative;
text-align: center;
}
..bannerleft {
float: left;
margin: 1em 0 0 1em;
}
..bannerright {
float: right;
margin: 1em 1em 0 0;
}
--
-bts
-This space intentionally left blank.
Jul 20 '05 #13

P: n/a
Figured out the body>div thing, sorry stupid question. I need to spend
more time in the w3c.

I see how your trying to do, but it really isn't working at all. I can
easily move the image within its container, but to merge the three in
one container or even get them on one line, I have no idea.

I would like to use display:inline or float even, which works very well
when I have an image in the HTML, but moving the image to the .css and
trying to use those methods, just makes them disappear (as I posted in
another question).

Heath wrote:
Anne,

Although I appreciate it, you give me too much credit. Unfortunately, I
still haven't figured out how the body>div thing works. The rest makes
sense.

BTW I am in .be, are you in .nl

Anne van Kesteren wrote:
Heath wrote:
> Like this:

-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

It would be easy to do <img align="right"></img>, etc, but I would
like to get this effect using my style sheet.

Any ideas on this?


I have left the semantics out of the following example, I think you
are smart enough to come up with those on your own.

CSS:
body>div{
background:url() center;
}
body>div>div:first-child{
float:right;
background:url() right;
}
body>div>div:last-child{
background:url() left;
}

XHTML:

<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div/>
<div/>
<div>
</body>


Jul 20 '05 #14

P: n/a
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Heath wrote:
So, I am still trying to get this centering issue figured out. I
am debating between using <img> tags in the html or background:
url(); for images.
This is an html question, really. What are the images for? The
middle one is a logo, so probably it should not be a background image.
What about the other 2?
I like the background property, because it is easier to work with
(in my opinion).
But note that you can only have one background image for an element.
Right now however I have three images that I need to line up within
a <div> container. I would like to have the left image stay on the
left, the center image stay centered, the right image flush right.


<div>
<img class="foo">
<img class="logo">
<img class="bar">
</div>

/* css */
..foo {float: left;}
..logo {text-align: center;}
..bar {float: right;}

untested, but should work.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #15

P: n/a


Brian wrote:
This is an html question, really. What are the images for? The
middle one is a logo, so probably it should not be a background image.
What about the other 2?
Is it? I know how to handle the html part without a problem, but it is
with the css I am struggling.
But note that you can only have one background image for an element.

I know, but I really like working with style sheets it save me time and
I can standardize things more easily.
Right now however I have three images that I need to line up within
a <div> container. I would like to have the left image stay on the
left, the center image stay centered, the right image flush right.

<div>
<img class="foo">
<img class="logo">
<img class="bar">
</div>

/* css */
.foo {float: left;}
.logo {text-align: center;}
.bar {float: right;}

untested, but should work.

On the first try it doesn't seem to work, but I will have to work with
it a bit more.

I guess I need to hit the w3c, I guess I need to figure out when I want
to use img vs. background.

Jul 20 '05 #16

P: n/a
Heath wrote:

Brian wrote:
This is an html question, really. What are the images for?


Is it? I know how to handle the html part without a problem, but it is
with the css I am struggling.


What is the *function* of the images? If they are content, then put
them in the html. If not, then using css, which is optional, may be a
better solution.
[first attempt snipped]
untested, but should work.


On the first try it doesn't seem to work


Stupid me; I should have tested it. Try this instead.

<STYLE TYPE="text/css">
#foobar {text-align: center;}
.foo {float: left;}
.bar {float: right;}
</STYLE>

<DIV id="foobar">
<IMG SRC="left.jpg" class="foo" ALT="">
<IMG SRC="right.jpg" class="bar" ALT="">
<IMG SRC="logo.gif" ALT="company name">
</DIV>

....using appropriate alt texts, of course.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #17

P: n/a
Heath wrote:
I see how your trying to do, but it really isn't working at all. I can
easily move the image within its container, but to merge the three in
one container or even get them on one line, I have no idea.

I would like to use display:inline or float even, which works very well
when I have an image in the HTML, but moving the image to the .css and
trying to use those methods, just makes them disappear (as I posted in
another question).


Maybe if I use less complicated selectors and more complicated (X)HTML:

CSS:
div#box{
background:url() center;
}
div#right{
float:right;
background:url() right;
}
div#left{
background:url() left;
}

HTML:

<div id="box">
<div id="right"></div>
<div id="left"></div>
<div>

Since the previous example only would have worked in Mozilla and was
just there to show you how something could be done, here a less
complicated example.

There are some things you need to add yourself like 'height' and 'width'
of which I don't know the values.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #18

P: n/a
(trim)

Thanks for your help Alan, Anne, Brian, Jim, and Neal. I think that
someone should put a sign on this group that reads the following: Follow
the posting rules and there are some of the most helpful individuals
over here.

This solves some issues that I have been struggling with. I really
appreicate it.

Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.