複雜垂直居中CSS大師（無法觸摸HTML）

我想垂直居中這些圖像。我無法更改我的HTML。可以做到嗎？這裏的小提琴：http://jsfiddle.net/EAGQH/2/這裏我也把代碼：複雜垂直居中CSS大師（無法觸摸HTML）

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>

這裏是我的CSS（到目前爲止）：

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

在此先感謝您的幫助。

來源

2011-10-17 George Katsanos

爲什麼你不能碰的HTML？ – Kyle

如果你不需要浮動li，那麼你可以使用內聯表顯示選項來使vertical-align：middle做到這一點。

所以CSS是這樣的李的

ul.photo-grid li { 
    display:inline-table; 
    margin: 10px; 
    height: 250px; 
    width: 200px; 
    text-align: center; 
    vertical-align:middle !important; 
}

關於IE6和7，它們不支持位置：表細胞，所以不是解決辦法就是給集裝箱以下樣式：

position:absolute; 
top:50%;

，然後給孩子們這些風格

position:relative; 
top:-50%;

這僅需要申請y到IE6和7，所以爲此添加一個無風格的表單或者可能使用內聯＃。

現在你的例子也需要放置圖片旁邊的海誓山盟流淌離開了，所以你需要有一個外容器：

position:relative; 
float:left;

你可以用你的「禮」對於這一點，你的「一」的垂直對齊容器，以及img和span作爲兒童（儘管只有ie6和7）。

我已經將其添加到您的撥弄直列＃選擇 - http://jsfiddle.net/EAGQH/69/

來源

2011-10-17 11:11:09

+1這很好，我試試這個，但你先給答案:) – sandeep

你好，謝謝你的回答，它適用於現代瀏覽器，但不適用於IE7。 –

這是正確的，他們不支持表格單元格。解決方法是將li的位置設置爲相對並將其左移，然後採用包含圖像和跨度的並將其定位爲絕對位置，並將其位置設置爲50％，然後將內容定位爲相對位置，並將頂部設置爲-50％。這將產生相同的效果。我會編輯答案，並將其添加到小提琴中。 –

複雜垂直居中CSS大師（無法觸摸HTML）

回答

相關問題