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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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