
垂直居中一直是一个比较头疼的问题,我这里只是解决了部分情况下的垂直居中问题,抛砖引玉,如果你的问题没有解决,试试看从我这个方向出发修改一下代码。
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”
We use cookies to improve your experience on our site. By using our site, you consent to cookies.
Manage your cookie preferences below:
Essential cookies enable basic functions and are necessary for the proper function of the website.
These cookies are needed for adding comments on this website.
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Service URL: policies.google.com
You can find more information in our Cookie Policy and Cookie Policy.