如何使用 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>