Complex Vertical Centering for CSS Gurus (cant touch HTML)
I am trying to Vertically center these images. I can't change my HTML. Is it possible to do it? here's the fiddle: http://jsfiddle.net/EAGQH/2/ I also put the code here:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" content="0">
<link media="screen" type="text/css" href="css.css" rel="stylesheet">
</head>
<body>
<ul class="photo-grid">
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/150x200" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
<li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
</ul>
And here is my CSS (so far) :
ul.photo-grid {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
width: 925px;
}
ul.photo-grid li {
float: left;
margin: 10px;
min-height: 250px;
width: 200px;
}
ul.photo-grid li:after {
clear: both;
content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
display: block;
font-size: xx-large;
height: 0 !important;
line-height: 0;
开发者_如何学Python overflow: hidden;
visibility: hidden;
}
ul.photo-grid a {
display: block;
margin: 0 auto;
text-align: center;
text-decoration: none;
}
ul.photo-grid img:after {
clear: both;
content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
display: block;
font-size: xx-large;
height: 0 !important;
line-height: 0;
overflow: hidden;
visibility: hidden;
}
ul.photo-grid span {display:block;}
Thanks in advance for your help.
If you don't have to float the li's, then you could use the inline-table display option to make vertical-align:middle do it's thing.
So the css would look like this for the li's
ul.photo-grid li {
display:inline-table;
margin: 10px;
height: 250px;
width: 200px;
text-align: center;
vertical-align:middle !important;
}
Concerning IE6 and 7, they don't support position:table-cell, so instead the workaround is to give the container following styles:
position:absolute;
top:50%;
and then give the children these styles
position:relative;
top:-50%;
This needs to only apply to IE6 and 7, so either add a stylessheet for that or perhaps use inline #.
Now your example also needs to place images next to eachother flowing left, so you need to have an outer container with:
position:relative;
float:left;
You can use your 'li' for that, your 'a' for vertical align container, and the img and span as children (still only for ie6 and 7 though).
I've added it to your fiddle with inline # selectors - http://jsfiddle.net/EAGQH/69/
加载中,请稍侯......
精彩评论