div的中心文字？

Question

我有一个div 30px高和500px宽.这div可以包含两行文本,一行在另一行之下,并相应地设置样式(填充).但有时它只包含一行,我希望它居中.这可能吗？

Answer 1

要水平居中,请使用text-align:center.

要垂直居中,只有vertical-align:middle在与其对齐的同一行中有另一个元素时才能使用.
看到它在这里工作.

我们使用高度为100%的空跨度,然后使用vertical-align:middle将内容放在下一个元素中.

还有其他一些技术,例如使用表格单元格或将内容放在绝对定位的元素中,顶部,底部,左侧和右侧都设置为零,但它们都会遇到跨浏览器兼容性问题.

Answer 2

我相信你希望文本在你的div内垂直居中,而不是(仅)水平.我知道这样做的唯一可靠方法是使用:

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

在您的div上,它适用于任意数量的行.你可以在这里看到一个测试:http://jsfiddle.net/qMtZV/1/

请务必检查此属性的浏览器支持,因为它不受支持 - 例如 - 在IE7或更早版本中.

更新02/10/2016

五年后,这种技术仍然有效,但我相信这个问题有更好,更可靠的解决方案.由于现在Flexbox支持很好,您可能希望按照以下方式执行操作:http://codepen.io/michelegera/pen/gPZpqE.

Answer 3

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

Answer 4

如果你有一个文本<div>:

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

Answer 5

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

诀窍是设置line-height等于height的div。

Answer 6

对于父 div，使用以下 CSS：

style="display: flex;align-items: center;"

Answer 7

您可以尝试在CSS中使用vertical-align属性来使其垂直居中

div {  
    vertical-align:middle;  
}

如果是尺寸问题，请注意 2 条文本行和 padding 样式的高度很有可能超过 30px。

例如，如果您的字体大小为 12 px，div 内边距为 5 px，则单行 div 高度将为 5 px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px，所以没问题，

对于 2 行文本 div，它将是 5px +12px *2（2 行）+ 5px = 34px > 30px，并且您的 div 高度将自动更改。

尝试增加 div 高度（也许 40 像素）或减少内边距。

希望它会有所帮助