表達它

之前，我們不得不處理與CSS創建頁面佈局，調整表格單元格內的一些內容似乎只是孩子的發揮。 只需設置“ 對齊 ”或“valign”屬性表中有您所選擇的路線，這塊蛋糕！
使用CSS佈局，儘管我們有“垂直對齊”為元素的屬性，它不似乎是簡單的“ 對齊 ”或“valign”屬性。 為了更specifiic“ 垂直對齊 ”似乎從來沒有解決您的任何問題，特別是如果是寫一個跨瀏覽器的CSS。

如果沒有使用HTML表格，對象為中心的問題，是圖片或一些文字內含有分裂，可能是每個UI / CSS開發人員在某些點的噩夢。 這一問題作進一步的調整，如果要居中的對象是動態的性質，即當它的高度是可變的推斷您的後顧之憂（未知的高度）。

雖然有沒有已知的直線前進的解決方案，跨瀏覽器，我們必須處理的範圍，將工作，我曾試圖在沒有到達的解決方案似乎工作中，我曾嘗試在一些瀏覽器（IE6，IE瀏覽器7 FF）。

解決方案：
在瀏覽器如Mozilla，Opera和Safari，但奇怪的行為“ 垂直對齊 ”的屬性可帶來的感覺，只是含分工“ 顯示 ”屬性設置“ 表格 ”（顯示：表單元）， 。

問題仍然存在與IE瀏覽器的家庭，誰，但似乎並沒有理解“ 細胞表 ”財產和無知，因為他們，他們就忽略它。 雖然簡單，廣告幾多個DOM元素的HTML使事情發生，如下的解決方案。

CSS和HTML看起來像這樣
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

的HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/>意見：3456 </ DIV>
</ DIV>
</ DIV>

結果看起來像這樣： -

在這裡查看演示 | 下載源文件 （下載454次）

---

了解解決方案：
明白顯示：表顯示：表單元屬性的瀏覽器，它很少需要任何解釋。 對於IE瀏覽器，使用IE特定的黑客（ 哈希黑客 ），我們絕對定位的對象容器（obj_container）可用高度的一半。 然後對象（obj）內的相對位置和移動，其高度的一半......好吧！ 我似乎明白了，就看你的臉，但它的工作原理。 試試吧！
上述技術相結合，給我們上述的跨瀏覽器的解決方案。

---

可以輕鬆地修改的CSS如下實現， 垂直對齊：頂部或垂直對齊：底部

頂部對齊的CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

的HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/>次：1234 </ DIV>
</ DIV>
</ DIV>

結果看起來像這樣： -

底部對齊的CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
的HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/>次：1234 </ DIV>
</ DIV>
</ DIV>

結果看起來像這樣： -

在這裡觀看演 ​​示 | 下載在這裡

---

簡單的margin屬性，通過設置保證金左保證金右自動實現的對象水平居中

好像年齡，因為我試圖找到一個合理的解決方案，這對準問題。 但現在，這一解決方案，我覺得在小和平。

希望有一天

• 垂直對齊的CSS屬性工作表細胞內，無需拐彎抹角
• 至少，設置保證金頂：汽車和利潤率底：汽車，將給予相同的結果與margin-left和保證金一套自動
• 有一天會超過瀏覽器大戰。
• 將有一個為所有的瀏覽器。

上述解決方案 （下載454次）可理解.. 下載的CSS和HTML ，CSS是沒有得到優化

注：順便說一下，這些都是一些我點擊圖片的縮略圖...