7 replies [Last post]
kyle.m
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-11-06
Posts: 9
Points: 0

I realize that this has probably been asked many, many times, but I am trying to get an image centered using CSS. I have been searching on Google for the past several hours, and nothing I have tried has yet worked in both Internet Explorer and Firefox. Here's the HTML and CSS I'm working with.

CSS:

body {
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
}

div.centered {
margin: auto;
}

HTML:

Test page

If anyone could help me out I would greatly appreciate it.

Kyle

Triumph (not verified)
Anonymous's picture
Guru

An image is an inline level

An image is an inline level element. text-align: center; will center it.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Just to add to that

Just to add to that explanation, a div is a block level element by default, which means that it will expand in width to fill the available space i.e. the width of 'body'. An image is an inline element which means that it occupies its own space and nothing else, in the same way as text does. So, if you put an image inside a div that expands to the width of the body, the image will always align left within the div by default unless you style the div such that anything within it aligns to centre i.e. with text-align: center;

Life's a b*tch and then you die!

kyle.m
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-11-06
Posts: 9
Points: 0

Thanks for the help Triumph

Thanks for the help Triumph and roytheboy. The text-align: center; works for images, but how do I get other block level elements to center? If I add in the following HTML, it doesn't work like I want.

Some text...

It centers the as if the image were next to it, but the image is all the way to the left. How can I get the image to be next to the text? Thanks again for the help.

Triumph (not verified)
Anonymous's picture
Guru

kyle.m wrote:<div><p><img

kyle.m wrote:


Some text...



It centers the as if the image were next to it, but the image is all the way to the left.
Well, you're floating it to the left. What did you expect it to do?

kyle.m
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-11-06
Posts: 9
Points: 0

Triumph wrote:kyle.m

Triumph wrote:
kyle.m wrote:


Some text...



It centers the as if the image were next to it, but the image is all the way to the left.
Well, you're floating it to the left. What did you expect it to do?
I was expecting it to float to the left within that block.

Triumph (not verified)
Anonymous's picture
Guru

kyle.m wrote:I was expecting

kyle.m wrote:
I was expecting it to float to the left within that block.

It is:

Some text...

kyle.m
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-11-06
Posts: 9
Points: 0

Triumph wrote:kyle.m wrote:I

Edit: I researched it a bit more and found a solution. Here's the code.

CSS:

body {
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
}

img.left-float {
float: left;
}

div.container {
text-align: center;
}

div.content {
margin: 0 auto;
width: 75%;
text-align: left;
}

HTML:

Test page

Some text...

Thanks again to everyone who helped.