如何使用 CSS 垂直对齐文本？

Question

<div style='height:200px;'>
SOME TEXT
</div>

我如何使用 CSS 在没有填充的情况下在 div 底部对齐“SOME TEXT”？

Answer 1

尽管不完全使用您的代码示例，但绝对最简单的方法是：

div {height: 400px;
    width: 50%;
    margin: 0 auto;
    background-color: #ffa;
    position: relative;
    }

div p   {position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    }

html

<div id="container">
<p>SOME TEXT</p>
</div>

将您的文本包裹在一个元素中，任何来自<p> 、 <span> 、 <div>任何内容，并将该元素放置在其容器的底部。

Answer 2

你不能以简单的方式做到这一点，至少不能跨浏览器。
您可以使用显示：表格； 垂直对齐：居中；
您可以使用 JS/CSS 表达式。
您可以在 div 中放置另一个元素，并将其相对于 div 进行绝对定位：

<div style='position:relative;'>
    <div style='position: absolute; bottom:0;>
            My Text
    </div>
</div>

但实际上，正如我不想说的那样，Tables 是这里的 KISS（如果您需要将其真正居中）。

Answer 3

TD 可以使用 vertical-align 垂直对齐文本，但这不适用于 DIV。 使用表格垂直对齐元素不被认为是好的风格。

您不能使用 CSS 在 DIV 中垂直对齐文本。 您只能使用填充、边距或绝对和固定定位来垂直对齐文本。

如果绝对定位使用得当，您可以通过垂直对齐文本所在的容器来垂直对齐文本。但是，绝对定位的元素不会占用其容器内的“空间”，这意味着您必须设置边距或填充来抵消容器中的空间。

例如：

HTML：

<div id="container">
  <span id="text">Some text, Some text, Some text, </span>
</div>

CSS：

#id {
  position:relative;
  margin-bottom: 100px;
}

#text {
  position:absolute;
  bottom:0;
  height: 100px;
  overflow:hidden;
}

Answer 4

# id{
    display:table-cell; 
    vertical-align:bottom;
    }

Answer 5

使用 flex，大多数浏览器都支持

 div { align-items: center; background: red; display: flex; /* Uncomment to align it horizontally */ /* justify-content: center; */ }

 <div style='height:200px;'> SOME TEXT </div>