Centering floated images?

**krayziepjf** · Oct 4, 2003 13:11

Can one center floated images? I used this alistapart article to display images on my website: http://alistapart.com/stories/practicalcss/

Problem is they left align themselves in the container they are in. I tried text-align: center; <center></center>, etc. to get them centered in the container they are in, but no dice. Can this be done and am I simply missing how to do it?

TIA

**Paul O'B** · Oct 4, 2003 14:20

Hi,

Text-align:center on the parent will centre images and text horizontally.

At a guess I'd say you were putting the text:align center on the image itself which won't work.

Paul

**krayziepjf** · Oct 4, 2003 14:27

nope. I have a <div class='image'> that goes around the image itself. i put around all the images a <div class='center'>. Class image has float: left; for it, and class center has text-align: center; for it. Doesn't work in IE6.0 or Mozilla.

**Paul O'B** · Oct 4, 2003 15:09

Hi,

Can you post the exact code you are using or you can try to work it out from this example.

This will centre an image horizontally (if you are using a similar format).

Code:

<style type="text/css">
<!--
.outer {
 float:left;
 height: 100px;
 width: 300px;
 background-color: #FFFF00;
 text-align:center
}
-->
</style>
</head>
<body>
<div class="outer"><img src="image.gif" width="100" height="100" alt="" /></div>
</body>

Paul

**krayziepjf** · Oct 4, 2003 15:17

Each image is wrapped in a css div:

Code:

 #gallery .image { float: left; border: 1px solid #0179B1; }

I then tried wrapped all the image divs in this which didn't work:

Code:

 #gallery .center { text-align: center; }

I tried this html code around all the image divs which didn't work:

Code:

 <center> ... </center>

From your example below, I modified the image div to such with no avail:

Code:

 #gallery .image { float: left; border: 1px solid #0179B1; text-align: center; }

**Paul O'B** · Oct 4, 2003 15:36

Hi,

You are trying to float the image left and center it at the same time. Both won't work.

Surely it's the gallery that should be floated and the image centred in the gallery. Apply the styles to the gallery not the image.

I would still need more code to give you the exact answer. For example how big is your gallery and are you trying to centre more than one image in it? Is the gallery being floated across the page (as I suspect) and the image is contained within?

The code I gave you would achieve this if you place it in the right place. I think you just need to think it through a bit more (lol)

.

Paul

**krayziepjf** · Oct 4, 2003 15:46

Haha, you're right Paul. If only we had hindsight in advance. Turns out that I really didn't need the float:left; option. I just assumed I needed since the article at alistapart showed using that. I took it out and reworked a line or two and got what I want now.

Thanx for the assistance Paul!

User Tag List

Thread: Centering floated images?

Thread Tools

Display

Centering floated images?

Bookmarks

Bookmarks

Posting Permissions