Question

到目前为止，我一直试图将动态高度的无序列表居中，但没有任何成功。

可以吗？怎么样？

我正在寻找一种旧浏览器友好的解决方案。

HTML：

<div class="info gradient">

<ul>
<li><p class="text-01">Lorem</p> <p class="description-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-02">Ipsum</p> <p class="description-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03">Dolor</p> <p class="description-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>

</div>

对于CSS，请查看此FIDDLE

感谢。

Answer 1

试试这个：

Fiddle

HTML：

<div class="info gradient">
<div class="ul_wrap">
<ul>
<li><p class="text-01">Lorem</p> <p class="description-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-02">Ipsum</p> <p class="description-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03">Dolor</p> <p class="description-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
    </div>

</div>

如上所述here IE7及更早版本不支持table属性的值table-cell和display。 IE8需要一个！DOCTYPE。 IE9支持这些值。

Answer 2

您的意思是THIS FIDDLE?

CSS：

html, body, ul{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
body{
    position:fixed;
    text-align:center;
}
ul{
    display:table;
    list-style:none;
}
ul li{
    display:table-row;
    margin:0 auto;
}

HTML：

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

Answer 3

您需要在每个段落的开头添加style="margin-left:200px"。

注意：您可以根据需要调整px，因为每个段落都相同

<div class="info gradient">

<ul>
<li><p class="text-01" style="margin-left:200px">Lorem</p> <p class="description-01" style="margin-left:200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>

<li><p class="text-02" style="margin-left:200px">Ipsum</p> <p class="description-02" style="margin-left:200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03" style="margin-left:200px">Dolor</p> <p class="description-03" style="margin-left:250px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>

</div>

http://jsfiddle.net/nate32100/j3aS2/

垂直中心动态UL

3 个答案: