如何让我的文本在 DIV 内垂直对齐？

Question

我有这个代码：

<div style="font-size: 1.5rem; width: 20%;vertical-align: middle;" >ABC</div>

当我查看页面时，它显示如下。我添加了 x 以显示 DIV:

的边界

xxxxxxxxxxxxxxx
x             x
x ABC         x
x             x
x             x
xxxxxxxxxxxxxxx

似乎垂直对齐没有做任何事情。

有没有办法让ABC上下的space一样。我看到了 CSS 个表格和 Flex。有什么方法可以使用标准 CSS 来实现，还是我需要使用 CSS 表格或 Flex 之类的东西？

Answer 1

习惯了display属性像这样

display:table-cell;

-

<div style="font-size: 1.5rem;border:solid 1px red; height:100px; width: 20%;display:table-cell;vertical-align: middle;" >abc</div>

Answer 2

有一种方法可以在没有 display: table; 和 display: flex 的情况下解决这个问题。这有点棘手，但工作正常。

首先，您的截图不能像这样工作，因为 vertical-align 属性仅适用于内联和 table-cell 框。 <div> 默认为 display: block，因此超出范围。

那么，我们能做什么呢？这个：

.vertical-align-content
{
  height: 150px;
  background-color: silver;
}

.vertical-align-content > span,
.vertical-align-content::before
{
  display: inline-block;
  vertical-align: middle;
}

.vertical-align-content::before
{
  height: inherit;
  content: "";
}

<div class="vertical-align-content">
  <span>Hello</span>
</div>

此解决方案是在 .vertical-align-content 中放置一个伪元素，其高度继承了父容器。伪元素和 <span> 都设置为 display: inline-block，因此可以使用 vertical-align 定位。最大的项目（伪元素）将强制跨度以自身为中心垂直对齐。

Answer 3

你可以试试这个：

<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div>

DEMO HERE

Answer 4

为什么不直接使用行高呢？

Fiddle: http://jsfiddle.net/SVJaK/2757/

<div class="test">ABC</div>

CSS:

.test {
   border: 1px solid green;
   width: 200px;
   line-height: 200px;
}

如何让我的文本在 DIV 内垂直对齐？

How can I make my text be vertically aligned within a DIV?

html

css

flexbox

css-tables