blocks|key|702567|text|line-height是垂直对齐文本的方式。这是非常标准的，我不认为这是一个“黑客”。只需将line-height:+100px添加到您的ul.catBlock+li中，就可以了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|702568|在这种情况下，您可能需要将其添加到ul.catBlock+li+a中，因为li中的所有文本也都在a中。当你这样做的时候，我已经看到一些奇怪的事情发生了，所以尝试两个，看看哪一个有效。|702569|entityMap^0|0|B|1A|I|1X|E|0|H|G|11|2|1C|1|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

<code>line-height</code> is how you vertically align text. It is pretty standard and I don't consider it a "hack". Just add <code>line-height: 100px</code> to your <code>ul.catBlock li</code> and it will be fine.

In this case you may have to add it to <code>ul.catBlock li a</code> instead since all of the text inside the <code>li</code> is also inside of an <code>a</code>. I have seen some weird things happen when you do this, so try both and see which one works.

blocks|key|486924|text|用display:+table定义父元素，用vertical-align:+middle和display:+table-cell定义元素本身。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|486925|entityMap^0|1|E|M|M|19|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Define the parent with <code>display: table</code> and the element itself with <code>vertical-align: middle</code> and <code>display: table-cell</code>.

blocks|key|702691|text|在未来，这个问题将通过flexbox来解决。目前，浏览器的支持是令人沮丧的，但在当前的所有浏览器中都以某种形式支持它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702692|浏览器支持：http://caniuse.com/flexbox|offset|length|702693|.vertically_aligned+{

++++/*+older+webkit+*/
++++display:+-webkit-box;
++++-webkit-box-align:+center;
++++-webkit-justify-content:+center;

++++/*+older+firefox+*/
++++display:+-moz-box;
++++-moz-box-align:+center;
++++-moz-box-pack:+center;

++++/*+IE10*/
++++display:+-ms-flexbox;
++++-ms-flex-align:+center;
++++-ms-flex-pack:+center;

++++/*+newer+webkit+*/
++++display:+-webkit-flex;
++++-webkit-align-items:+center;
++++-webkit-box-pack:+center;

++++/*+Standard+Form+-+IE+11%2B,+FF+22%2B,+Chrome+29%2B,+Opera+17%2B+*/
++++display:+flex;
++++align-items:+center;
++++justify-content:+center;
}|code-block|syntax|javascript|702694|Flexbox的背景：http://css-tricks.com/snippets/css/a-guide-to-flexbox/|702695|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/flexbox|1|http://css-tricks.com/snippets/css/a-guide-to-flexbox/^0|0|6|Q|0|0|0|B|1I|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

In the future, this problem will be solved by flexbox. Right now the browser support is dismal, but it is supported in one form or another in all current browsers.

Browser support: <a href="http://caniuse.com/flexbox" rel="noreferrer">http://caniuse.com/flexbox</a>

<pre><code>.vertically_aligned {

 /* older webkit */
 display: -webkit-box;
 -webkit-box-align: center;
 -webkit-justify-content: center;

 /* older firefox */
 display: -moz-box;
 -moz-box-align: center;
 -moz-box-pack: center;

 /* IE10*/
 display: -ms-flexbox;
 -ms-flex-align: center;
 -ms-flex-pack: center;

 /* newer webkit */
 display: -webkit-flex;
 -webkit-align-items: center;
 -webkit-box-pack: center;

 /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
 display: flex;
 align-items: center;
 justify-content: center;
}
</code></pre>

Background on Flexbox: <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">http://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>

blocks|key|487031|text|无论这种反应可能晚了多少年，遇到这种情况的任何人都可能只想试一试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|487032|li+{
++++display:+flex;
++++flex-direction:+row;
++++align-items:+center;
}|code-block|syntax|javascript|487033|浏览器对flexbox的支持比@scottjoudry在上面发布他的回应时要好得多，但如果你想支持更老的浏览器，你可能仍然想要考虑前缀或其他选项。caniuse:+flex|offset|length|487034|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=flex^0|0|0|21|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

However many years late this response may be, anyone coming across this might just want to try

<pre><code>li {
 display: flex;
 flex-direction: row;
 align-items: center;
}
</code></pre>

Browser support for flexbox is far better than it was when @scottjoudry posted his response above, but you may still want to consider prefixing or other options if you're trying to support much older browsers. <a href="https://caniuse.com/#search=flex" rel="noreferrer">caniuse: flex</a>

blocks|key|702781|text|垂直居中对齐的简单解决方案...对我来说，它就像是一种护身符|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702782|ul{display:table;+text-align:center;+margin:0+auto;}
li{display:inline-block;+text-align:center;}
li.items_inside_li{display:inline-block;+vertical-align:middle;}|code-block|syntax|javascript|702783|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simple solution for vertical align middle... for me it works like a charm 

<pre><code>ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}
</code></pre>

I am displaying number of boxes in a row with fix height and width, generated from &lt;li&gt; tags.
now I need to align the text in the vertical center.
The CSS vertical-align has no impact, maybe I am missing something???

I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.

Please find the actual code:

<h2>CSS code</h2>

<pre><code>ul.catBlock{
 width:960px; 
 height: 270px; 
 border:1px solid #ccc; 
}

ul.catBlock li{
 list-style: none; 
 float:left; 
 display:block; 
 text-align: center; 
 width:160px; 
 height: 100px;
}

ul.catBlock li a{ 
 display: block; 
 padding: 30px 10px 5px 10px; 
 height:60px;
}
</code></pre>

<h2>HTML code</h2>

<pre><code>&lt;ul class="catBlock"&gt;
 &lt;li&gt;&lt;a href="#"&gt;IP Phone&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dual SIM Switch Server&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;IP PBX&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

CSS vertical alignment text inside li

我正在显示一行中具有固定高度和宽度的框的数量，这些框是从标签生成的。现在，我需要将文本垂直居中对齐。CSS垂直对齐没有影响，也许我遗漏了什么？我没有寻找技巧使用(边距，填充，行高)，这些将不会工作，因为一些文本很长，将打破为两行。请找到实际代码：CSS代码ul.catBlock{  width:960px;   hei...

问CSS在li中垂直对齐文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在li中垂直对齐文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在li中垂直对齐文本
EN