表达它

之前，我们不得不处理与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>

结果看起来像这样： -

在这里查看演示 | 下载源文件 （下载451次）

---

了解解决方案：
明白显示：表显示：表单元属性的浏览器，它很少需要任何解释。 对于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和保证金一套自动
• 有一天会超过浏览器大战。
• 将有一个为所有的浏览器。

上述解决方案 （下载451次）可理解.. 下载的CSS和HTML ，CSS是没有得到优化

注：顺便说一下，这些都是一些我点击图片的缩略图...