html – 在’ul’中垂直对齐’li’中间

概述我有一个简单的无序列表,如下所示： <ul class="flavours"> <li>Chocolate</li> <li>Caramel</li> <li>Watermelon</li></ul> < ul class =“flavors”>最小高度为200px,并且随着更多< li>增长而增长.通过jQuery ui拖放库将元素添加到列表中. 当只有一个 我有一个简单的无序列表,如下所示：

<ul >        <li>Chocolate</li>     <li>Caramel</li>     <li>Watermelon</li></ul>

< ul class =“flavors”>最小高度为200px,并且随着更多< li>增长而增长.通过jquery ui拖放库将元素添加到列表中.

当只有一个或两个< li>时列表中的元素,我如何在整个< ul>的中间垂直对齐它们.因此当高度为200px时,物品将是死点,水平和垂直.目前他们只是位于中心位置.

解决方法 如果你想要跨浏览器支持,特别是对于IE和旧浏览器,除非你愿意使用JavaScript或表格,否则垂直居中往往是一件棘手的事情.所有常见的浏览器都支持表格单元格内的垂直居中,因此一种选择是忘记将< li>居中. < ul>中的元素而是创建一个高度为100％且内部有一个单元格的表格,其中vertical-align：mIDdle.这不是一个流行的答案,但有时使用表格是最实用的,正如 this SO response中所论证的那样.

如果您不想使用表并且不能使用display：table-cell来支持浏览器,那么您可能需要使用JavaScript.再次,我会尝试将ul置于容器中心,而不是ul中的li.方法通常是找到容器的高度,找到ul的高度,取差异,将其切成两半,并将ul的顶部或margin-top设置为该值,具体取决于您是否要是否使用绝对定位.

如果没有看到页面中列表的上下文,很难给出最精确的解决方案.

Here’s a fiddle使用绝对定位和JavaScript.在这种情况下使用margin-top和默认位置是棘手的,因为外部div会导致边距崩溃,但是如果你可以使用它,那么你可以使用margin：0 auto来进行水平居中,这很好,因为你可以忽略宽度.

总结

以上是内存溢出为你收集整理的html – 在’ul’中垂直对齐’li’中间全部内容，希望文章能够帮你解决html – 在’ul’中垂直对齐’li’中间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。