如何将带有动态内容的无序列表居中放置在 div 中?

2024-04-27

我正在尝试找出一种将 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(使用前将#替换为@)

如何将带有动态内容的无序列表居中放置在 div 中? 的相关文章