如何使用CSS垂直对齐固定高度列表项中的文本？

How can I vertically align the text in the following list items:

如何垂直对齐以下列表项中的文本:

http://jsfiddle.net/K2eF3/

<style>

ul { list-style-type: none; width: 300px; }
ul li { border: 1px solid red; height: 100px; }

</style>

<ul>
    <li>A bear</li>
    <li>A panda who eats bamboo</li>
    <li>A giraffe with a very very very very very veryvery very very very long neck</li>
</ul>

I can't use line-height because those sentences are dynamically generated and could be one line or multiline (not always singe). That's also why I can just individually target each <li> with custom padding.

我不能使用行高,因为这些句子是动态生成的,可能是一行或多行(并不总是单行)。这也是为什么我可以使用自定义填充单独定位每个

的原因。

Vertical align middle didn't work either, after reading up on it, it appears to only target elements which explains why aligning text inside an element using it didn't work.

垂直对齐中间也不起作用,在阅读之后,它似乎只针对元素,这解释了为什么使用它在元素内部对齐文本不起作用。

4 个解决方案

#1

Wrap the content of each <li> in a <span> then apply the following css:

在中包装每个

的内容,然后应用以下css:

ul li span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/K2eF3/12/

#2

if you are not too worried about IE7 and below, try wrapping the text with a div and adding display:table-cell, vertical-align:middle and height:100px on the div.

如果你不太担心IE7及以下版本,请尝试用div包装文本并在div上添加display:table-cell,vertical-align:middle和height:100px。

#3

Safari/Chrome and Firefox have their own implementations of the CSS Flexible Box Module, which allows this sort of layout:

Safari / Chrome和Firefox都有自己的CSS Flexible Box模块实现,允许这种布局:

• http://jsfiddle.net/K2eF3/4/

However, there’s sadly no display:-o-box; or display:-ms-box; for Opera and Internet Explorer yet.

然而,遗憾的是没有显示:-o-box;或显示:-ms-box;用于Opera和Internet Explorer。

#4

Here's my working solution.

这是我的工作解决方案。

It uses jQuery to vertically align the span inside the li. To make sure the span is correctly aligned it should have the display property should have inline-block value.

它使用jQuery垂直对齐li内的跨度。为了确保跨度正确对齐,它应该具有显示属性应该具有内联块值。

If you can't change the output to the spans inside the LI I can help you doing it using jQuery.

如果你不能将输出更改为LI内的跨度,我可以帮助你使用jQuery。