css - div中的中心文本？

Question

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

score 53 · Accepted Answer

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

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

我们使用一个高度为 100% 的空 span，然后将内容放在下一个带有 vertical-align:middle 的元素中。

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

score 24 · Accepted Answer

我相信您希望文本在 div 内垂直居中，而不是（仅）水平居中。我知道这样做的唯一可靠方法是使用：

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

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

一定要检查浏览器对这个属性的支持，因为它不支持——例如——在 IE7 或更早版本中。

2016 年 2 月 10 日更新

五年后，这项技术仍然有效，但我相信有更好、更可靠的解决方案来解决这个问题。由于Flexbox支持现在很好，您可能想要按照以下方式做一些事情：http: //codepen.io/michelegera/pen/gPZpqE。

score 7 · Accepted Answer

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; 
}

score 5 · Accepted Answer

如果您在 a 中有文本<div>：

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

score 5 · Accepted Answer

5

对于父 div，使用以下 CSS：

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

于 2016-12-03T13:29:41.090 回答

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

2

添加行高也有帮助。

text-align: center;
line-height: 18px; /* for example. */

于 2015-03-24T02:08:31.530 回答

score 2 · Accepted Answer

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

div {  
    vertical-align:middle;  
}

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

例如，如果您的字体大小为 12 px，而您的 div padding 为 5 px，那么一个文本行的 div 高度将为 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px 所以没问题，

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

尝试增加您的 div 高度（可能是 40 像素）或减少您的填充。

希望它会有所帮助

score 0 · Accepted Answer

0

我环顾四周

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

似乎是最流行的解决方案

于 2013-03-25T03:26:56.257 回答

score 0 · Accepted Answer

0

display: block;
text-align: center;

于 2014-04-20T16:46:22.670 回答

score 0 · Accepted Answer

0

我可能在这里遗漏了一些东西，但是您是否尝试过：

text-align:center;

??

于 2011-05-19T07:48:04.287 回答

score 0 · Accepted Answer

0

这对你有用吗？

div { text-align: center; }

于 2011-05-19T07:48:43.017 回答

score -1 · Accepted Answer

-1

添加到包含文本的选择器

margin:auto;

于 2017-10-11T14:53:32.537 回答

13 回答 13