【问题标题】:line height for % height% 高度的行高
【发布时间】:2012-12-09 04:10:55
【问题描述】:

当我想在 div 中垂直居中文本时,例如添加 line-height;

<div class="text"> Text </div>
.text{
   height:50px;
   line-height:50px;
 }

但是如果 height:5%,如何给 line-height 一个值以使 div 中的文本垂直居中?

【问题讨论】:

  • heightline-height 属性值必须相同。为了使vertically-align 属性起作用,这些元素应该位于表格下方。

标签: html css height vertical-alignment


【解决方案1】:

如果你想在 div 的中间居中文本,只需添加:

display:table-cell;
vertical-align:middle;

到你的 div,它会在中间垂直对齐。

CSS

<div class="text"> Text </div>
.text{
   height:50px;
   display:table-cell;
   vertical-align:middle;
 }

示例 http://jsfiddle.net/JaP22/

【讨论】:

  • 这似乎不适用于百分比,不知道为什么。认为这可能是因为匿名表/表行没有高度,但添加实际的表/表行元素似乎没有帮助:jsfiddle.net/JaP22/1
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多