我怎样才能在一个无序的列表与div中的动态内容？ [英] How can I center an unordered list with dynamic content within div?

问题描述

我试图找出一种方法来将一个无序列表垂直居中在一个div中。我发现了很多方法可以做到这一点，但是我的ul标签中的li标签中包含PHP代码，它们可以从数据库中获取文本，这会导致li标签中文本的长度变化很大，从而导致垂直筛选我的div有一个固定的高度和宽度。

我如何垂直放置我的无序列表，以便它始终在此div内垂直对齐？

解决方案

如果您尝试以水平方向为中心，则可以使用以下任意长度的代码：

预览： http://jsfiddle.net/Wexcode/6UtFz/

HTML：

 < div> 
< ul> 
< li>< a href =＃>元素1< / a>< / li> 
< li>< a href =＃>元素2< / a>< / li> 
< li>< a href =＃>元素3< / a>< / li> 
< li>< a href =＃>元素4< / a>< / li> 
< / ul> 
< / div> 
  

CSS：

  div {overflow：hidden; } 
 ul {
 position：relative; 
 float：left; 
剩下：50％; 
 padding：0; 
 list-style：none; } 
 li {
 position：relative; 
 float：left; 
右：50％; 
 margin：0 5px; } 
  

---

对于垂直居中，只要利用 vertical-align 属性。

请参阅： http://jsfiddle.net/Wexcode/fK793/

I'm trying to figure out a way to vertically center an unordered list within a div. I found a number of ways to do this, however the li tags within my ul tag have PHP code in them that gets text from a database and this causes the length of the text within the li tags to vary in length significantly causing vertical sifting within my div which has a fixed height and width.

How can I vertically position my unordered list so it'll always be vertically aligned within this div?

解决方案

If you're trying to center horizontally, here is a bit of code that will work for any length:

Preview: 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; }

---

For vertical-centering, just make use of the vertical-align property.
See: http://jsfiddle.net/Wexcode/fK793/

这篇关于我怎样才能在一个无序的列表与div中的动态内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！