What’s interesting is that I’ve added another section below it with similar code and now that text won’t center with the image…odd:
When you made the image a block, you lost the ability to use text-align: center on his parent to center him. Blocks can’t be centered that way (except in IE, but we’ll forget that).
The other option in Gary’s page will let you keep the img an inline element: change the vertical-align property to anything other than the default baseline
for example
.photolist li img, .photolist li a img {
vertical-align: bottom;
}
Then he stays an inline but you still get rid of the annoying descender space : )
<style type="text/css">
.listphotos {
width:100%;
margin: 0px;
padding: 0px;
list-style:none;
text-align:center;
font-family:arial;
}
.listphotos li {
display:-moz-inline-box;/* FF2 & under */
display:inline-block;/* for modern browsers */
vertical-align:top;
margin: 0px 10px 10px 10px;
padding: 0px;
width: 152px; /*152-145*/
}
.listphotos li a {
float:left;/*IE6/7 needs haslayout*/
padding:0px;
text-decoration:none;
text-align: center;
}
.photolist li img, .photolist li a img {
vertical-align: bottom;
}
.listphotos li a:hover {
color:#000;
}
/*=== Testing CSS Round Corners ===*/
.listphotos,.listphotos li,.listphotos li a{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.listphotos li a{margin:-1px;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.photolist ul li{
display:inline;
margin: 0px 10px 10px 0px;
}
</style>
My second row of item is:
<h3 style="text-align: left;">Photos</h3>
<ul class="photolist">
<li><a href="imags/press_release/2011.jpg" rel="lightbox[2011.jpg]" target="_blank"><img src="imags/press_release/2011.jpg" width="132" height="172" alt="Meedering It All" title="Meedering It All " /></a><br />
<span style="margin: 0px; font-size: 10px;"><a href="http://www.heather-visser.com/" target="_blank">Meedering It All<br />
October 10, 2010</a></span></li>
</ul>
Neither the image nor the spanned link are centered. It’s funny, it has the same setup as the first row and the first row of content is accommodating, but not this one.
By the way, you’ve been a great help. That was a good link you sent me.
Neither the image nor the spanned link are centered.
You are posting CSS for someone called “listphotos” mostly (except for the vertical-align: bottom thing), but your HTML keeps talking about a “photolist”. So, two entirely different things who are totally not talking about each other.
(as a note: .photolist li img will also hit .photolist li a img as well)