li内的CSS垂直对齐文本
Posted
技术标签:
【中文标题】li内的CSS垂直对齐文本【英文标题】：CSS vertical alignment text inside li 【发布时间】：2012-01-22 13:14:49 【问题描述】：我在一行中显示由
标签生成的具有固定高度和宽度的框数。 现在我需要在垂直中心对齐文本。 CSS vertical-align 没有影响，可能是我遗漏了什么？？？我不是在寻找使用 (margin, padding, line-height) 的技巧，这些都行不通，因为有些文本很长并且会分成两行。
请查找实际代码：
CSS 代码
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;
html 代码
<ul class="catBlock">
<li><a href="#">IP Phone</a></li>
<li><a href="#">Dual SIM Switch Server</a></li>
<li><a href="#">IP PBX</a></li>
</ul>
【问题讨论】：
您可能需要提供更多信息。箱子高度一样吗？您是否在 li 的框中对齐文本？ “因为有些文字很长……两行”？？？可能是屏幕截图或小提琴会有所帮助。 我刚刚尝试发布屏幕截图但它不允许我，因为我的帐户是新帐户。 【参考方案1】：line-height 是垂直对齐文本的方式。这是相当标准的，我不认为它是“黑客”。只需将line-height: 100px 添加到您的ul.catBlock li 即可。
在这种情况下，您可能必须将其添加到 ul.catBlock li a，因为 li 内的所有文本也在 a 内。我看到你这样做时会发生一些奇怪的事情，所以请尝试两者，看看哪一个有效。
【讨论】：
我最初使用的是 line-height，但是当内容很长时，它会分成 2 行，假设每行有 100px 的间隙，这会让它看起来更糟。还有其他方法吗？ 如果你有display: table-cell，我认为有一种方法可以拥有vertical-align: middle。我从来没有使用过它。看这里：phrogz.net/css/vertical-align/index.html
很好的解决方案 - 我将 li 'line height' 设置为与我的最小高度相同，并且文本垂直对齐 - 至少足够接近目视检查。上面的“表格”解决方案当然不是语义的，本质上是骇人听闻的。每当我们这样做时，我们都会增加响应式环境中某处显示损坏或古怪行为的可能性。
谢谢！在 元素上效果很好！多么简单的解决方案 :-) 只需将其调整为正确的值，它就会垂直居中完美！【参考方案2】：
用display: table 定义父元素，用vertical-align: middle 和display: table-cell 定义元素本身。
【讨论】：
+1 用于显示表格/表格单元格。似乎没有多少人知道他们的存在。 这是来自 W3CSchool... 注意：值“inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table- IE7 及更早版本不支持 column"、"table-column-group"、"table-row"、"table-row-group" 和 "inherit"。 IE8 需要一个!DOCTYPE。 IE9 支持这些值。 这个解决方案很糟糕，因为它完全关闭了保证金的任何影响。唯一的解决方案是制作大量的伪元素。为什么 css 这么烂。<li>s 排成一行怎么样？
如果您实际上没有显示表格数据，这也不符合 CATO 可访问性。【参考方案3】：
令人惊讶（或不令人惊讶），vertical-align 工具实际上最适合这项工作。 最重要的是，不需要 Javascript。
在下面的示例中，我将outer 类定位在主体的中间，将inner 类定位在outer 类的中间。
预览：http://jsfiddle.net/tLkSV/513/
HTML：
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS：
html, body
height: 100%;
margin: 0;
padding: 0;
#container
text-align: center;
height: 100%;
span
height: 100%;
vertical-align: middle;
display: inline-block;
.outer
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block;
.inner
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block;
垂直对齐通过对齐彼此相邻的元素的中心来工作。对单个元素应用垂直对齐绝对没有任何作用。如果您添加第二个没有宽度但为容器高度的元素，您的单个元素将移动到该无宽度元素的垂直居中，从而使其垂直居中。唯一的要求是您将两个元素都设置为 inline（或 inline-block），并将它们的 vertical-align 属性设置为 vertical-align: middle。
注意：您可能会在下面的代码中注意到我的<span> 标签和<div> 标签是接触的。因为它们都是内联元素，所以空格实际上会在无宽度元素和您的 div 之间添加一个空格，因此请务必将其省略。
【讨论】：
太棒了，这很有意义。 //我现在不能投票给你的答案，因为我的最低声望应该是 15。 对于那些正在寻找这种技术直接应用于问题的人 - jsfiddle.net/utGVt/385【参考方案4】：这里没有提供完美的答案，除了 Asaf 的答案没有提供任何代码或任何示例，所以我想贡献我的...
为了使vertical-align: middle; 工作，您需要将display: table; 用于ul 元素，将display: table-cell; 用于li 元素，然后您可以将vertical-align: middle; 用于li 元素。
您无需提供任何明确的margins、paddings 即可使您的文本垂直居中。
Demo
ul.catBlock
display: table;
width:960px;
height: 270px;
border:1px solid #ccc;
ul.catBlock li
list-style: none;
display: table-cell;
text-align: center;
width:160px;
vertical-align: middle;
ul.catBlock li a
display: block;
【讨论】：
这无济于事，因为它垂直对齐的唯一原因是你用 a 标签上的填充强制它向下 @Mr.Alien 我会重申，这个解决方案的唯一问题是忽略了保证金规则。【参考方案5】：以后这个问题会被flexbox解决。目前浏览器的支持很糟糕，但所有当前浏览器都以一种或另一种形式支持它。
浏览器支持：http://caniuse.com/flexbox
.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;
Flexbox 背景：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
【讨论】：
在提出这个问题时，我不确定这是否是一个好的答案，但今天我们看到了~95% prefixed support，所以我当然认为这是一个可行的选择。 如果你希望 元素环绕（而不是被收缩），添加 flex-wrap: wrap;在 级别 这个类我还要加什么元素？【参考方案6】：如此处所述：https://css-tricks.com/centering-in-the-unknown/。
在实际实践中测试，最可靠但优雅的解决方案是在
<li />元素中插入一个辅助内联元素作为第一个子元素，其高度应设置为 100%（其父元素的高度，@ 987654324@)，其vertical-align设置为中间。要做到这一点，你可以放一个<span />，但最方便的方法是使用li:after伪类。
截图：
ul.menu-horizontal
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
ul.menu-horizontal:after
content: '';
clear: both;
float: none;
display: block;
ul.menu-horizontal li
padding: 5px 10px;
box-sizing: border-box;
height: 100%;
cursor: pointer;
display: inline-block;
vertical-align: middle;
float: left;
/* The magic happens here! */
ul.menu-horizontal li:before
content: '';
display: inline;
height: 100%;
vertical-align: middle;
【讨论】：
【参考方案7】：试试这个解决方案
在大多数情况下效果最佳
你可能需要使用 div 而不是 li
.DivParent
height: 100px;
border: 1px solid lime;
white-space: nowrap;
.verticallyAlignedDiv
display: inline-block;
vertical-align: middle;
white-space: normal;
.DivHelper
display: inline-block;
vertical-align: middle;
height:100%;
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>【讨论】：
为什么需要一个 divHelper 来垂直对齐？我在另一个主题上看到了它，但我不明白为什么没有另一个 div 它不能自我对齐..【参考方案8】：无论这种反应可能晚了多少年，遇到这种情况的任何人都可能只想尝试
li
display: flex;
flex-direction: row;
align-items: center;
浏览器对 flexbox 的支持比@scottjoudry 在上面发布他的回复时要好得多，但是如果您尝试支持更旧的浏览器，您可能仍需要考虑前缀或其他选项。 caniuse: flex
【讨论】：
这与 Chrome 中的list-style-image 不匹配 - 图像消失了
我在 bootstrap 4 nav-item 上使用了它，效果很好。谢谢。
弹性盒子像往常一样保存直播
完美运行！
像魅力一样工作！【参考方案9】：
垂直对齐中间的简单解决方案......对我来说它就像一个魅力
uldisplay:table; text-align:center; margin:0 auto;
lidisplay:inline-block; text-align:center;
li.items_inside_lidisplay:inline-block; vertical-align:middle;
【讨论】：
以上是关于li内的CSS垂直对齐文本的主要内容，如果未能解决你的问题，请参考以下文章