Previous Message
Next Message

Centering Floated Images

Sent by Matt Harris on 29 September 2005 16:04


I have a group of floated images which wrap to the next line as the page
width changes. Inevitably, a few stranglers will be on the bottom row, and
of course, they will be floated left. Is there a way to center these images
and achieve the same wrapping effect?

For example I would like this:
-------------------------------
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] |
-------------------------------

to appear like this:
-------------------------------
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] [IMG] [IMG] |
| [IMG] [IMG] |
-------------------------------

---------------------
Current Code:
---
<style type="text/css">
..imgwrapper {margin: 0 auto;}
..images {position: relative; padding: 20px; margin: 0 auto; clear: both;}
..images img {float: left; margin: 0 3px 3px 0;}
..clear {clear:both;}
</style>

<div class="imgwrapper">
<div class="images">
<a href="#"><img src="1.jpg" alt="" id="a1" /></a>
<a href="#"><img src="2.jpg" alt="" id="a2" /></a>
<a href="#"><img src="3.jpg" alt="" id="a3" /></a>
<a href="#"><img src="4.jpg" alt="" id="a4" /></a>
<a href="#"><img src="5.jpg" alt="" id="a5" /></a>
<a href="#"><img src="6.jpg" alt="" id="a6" /></a>
<a href="#"><img src="7.jpg" alt="" id="a7" /></a>
<a href="#"><img src="8.jpg" alt="" id="a8" /></a>
<a href="#"><img src="9.jpg" alt="" id="a9" /></a>
<a href="#"><img src="10.jpg" alt="" id="a10" /></a>
<a href="#"><img src="11.jpg" alt="" id="a11" /></a>
<a href="#"><img src="12.jpg" alt="" id="a12" /></a>
</div>
</div>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: