我正在尝试找出一种将 div 内的无序列表垂直居中的方法。我找到了很多方法来做到这一点,但是我的 ul 标签中的 li 标签中有 PHP 代码,可以从数据库获取文本,这会导致 li 标签中的文本长度发生变化,显着导致内部垂直筛选我的 div 有固定的高度和宽度。
如何垂直定位无序列表,使其始终在此 div 内垂直对齐?
如果您尝试水平居中,这里有一些适用于任何长度的代码:
预览:http://jsfiddle.net/Wexcode/6UtFz/ http://jsfiddle.net/Wexcode/6UtFz/
HTML:
<div>
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
</ul>
</div>
CSS:
div { overflow: hidden; }
ul {
position: relative;
float: left;
left: 50%;
padding: 0;
list-style: none; }
li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
对于垂直居中,只需使用vertical-align
财产。
See: http://jsfiddle.net/Wexcode/fK793/ http://jsfiddle.net/Wexcode/fK793/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)