垂直居中一直是一个比较头疼的问题,我这里只是解决了部分情况下的垂直居中问题,抛砖引玉,如果你的问题没有解决,试试看从我这个方向出发修改一下代码。
inline-block具有inline的一些属性,这里要使用的就是他对 vertical-align: middle的支持。由于inline-block在IE6/7不支持div/p等标签,所以改用span标签
下图是我做的一个弹出框的样子:左侧感叹号和右侧一堆文字垂直居中
<div id="pop"> <div id="alerttxt"> <span id="alert" class="align_middle">!</span> <span id="poptxt" class="align_middle">一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一堆文字啊一文啊一一文啊一</span> </div> </div>
#pop { background-color: #FFF; width: 350px; position: relative; border: 1px solid #e4ddb7; padding: 5px; margin-right: auto; margin-left: auto; overflow: hidden; zoom: 1; } #alert { font-size: 120px; color: #ca3d06; text-align: center; width: 100px; line-height: 1em; } #poptxt { margin-left: 5px; margin-top: 5px; width: 220px; } .align_middle { vertical-align: middle; display: -moz-inline-stack; display: inline-block; zoom: 1; }
关键是最后的“.align_middle”