Search code examples
csspositioningvertical-alignment

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;
    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.

Solution

  • 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/