本文介绍了一种使用CSS实现文本和图片垂直居中的方法。通过设置特定的样式属性，如display: table-cell, vertical-align: middle等，可以轻松地使内容在div容器内水平和垂直居中。
CSS设置
<style type="text/css">
.box {
border:#eee solid 1px;
width:300px;
height:120px;
line-height:120px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
1.文本
<div class="box">Sample text</div>
2.图片(IE下在图片后面加一个空格)
<div class="box"><img alt="" src=" http://www.youkuaiyun.com/images/newcsdnlogo.gif" /> </div>
<style type="text/css">
.box {
border:#eee solid 1px;
width:300px;
height:120px;
line-height:120px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
1.文本
<div class="box">Sample text</div>
Sample text
2.图片(IE下在图片后面加一个空格)
<div class="box"><img alt="" src=" http://www.youkuaiyun.com/images/newcsdnlogo.gif" /> </div>
扫一扫
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
