垂直居中单一和多行CSS没有固定高度

问题描述：

我在html中有一些文本标签，例如<label>Short</label>和<label>This is a long label which is split into two line</label>。这些标签位于不同高度的div元素内。我怎样才能让文字居中？我已经使用display: table-cell; vertical-align: center;，它适用于单线但不是双线，它推动<div>元素外的双线文本。任何帮助？垂直居中单一和多行CSS没有固定高度

FYI其'垂直对齐：中间;''不center'！代码片段对于显示发生了什么非常有帮助，但您是否希望如下所示：https://codepen.io/samwalker/pen/mmzMEd – circa1983

答

试试这个，它可能为你工作：

{ display: flex; align-items: center; justify-content: center; }

tbh - Flexbox是最简单的解决方案，并且受到大多数现代浏览器的支持，但IE9在下面并不支持它！ IE10需要2012款式的语法＆11可能会很棘手，但如果你使用autoprefixer，生活很简单。 http://caniuse.com/#feat=flexbox – circa1983

我也认为支持IE 9以前的人群并不重要。根据浏览器统计，只有0.2％的IE用户使用IE 11之前的版本（W3Schools，来源：https：//www.w3schools.com/browsers/browsers_explorer.asp）。人们可以说这个小节是微不足道的，尤其是考虑到IE有其他的怪癖 – TCharb

这个解决方案完美的工作！ – user3277335

答

使用<center> <label> here is your label </label> </center>

**来自复审队列**：我可以请求您在源代码中添加一些上下文。仅有代码的答案很难理解。如果您可以在帖子中添加更多信息，它可以帮助提问者和未来的读者。 – RBT

您不应该使用'

'标签。它在HTML4中被弃用。 –

垂直居中单一和多行CSS没有固定高度

相关推荐