javascript - 垂直居中动态 UL

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 及更早版本不支持 display 属性的值 table 和 table-cell。 IE8 需要 !DOCTYPE。 IE9 支持这些值。