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

如何使用CSS对齐div底部的“一些文本”，而不使用填充？

最简单的方法是：

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

html

一些文本

---

将文本包装在一个元素中，可以是

，
，
…任何内容，并将该元素放在其容器底部。
您不能用简单的方法来完成，至少不能跨浏览器。

您可以使用显示：表格；垂直对齐：居中

您可以使用JS/CSS表达式。

您可以在div内有另一个元素，并将其相对于div定位为绝对：

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


TDs可以垂直对齐文本和垂直对齐，但这不适用于DIV。使用表格垂直对齐元素被认为是不好的样式

无法使用CSS垂直对齐div中的文本。只能使用填充、边距或绝对和固定位置垂直对齐文本

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

例如：

HTML:

#id{
显示：表格单元格；
垂直对齐：底部对齐；
}
使用flex


div{
对齐项目：居中；
背景：红色；
显示器：flex；
/*取消注释以使其水平对齐*/
/*证明内容：中心*/
}

一些文本
Dupe of？@strager，这不是真的Dupe。在容器底部放置内容的技术与在容器中垂直放置容器的技术不同，我认为它们是不同的问题。IE 6不知道如何处理左侧和右侧声明的绝对定位元素（或顶部和底部）。相反，您需要执行左：0；宽度：100%-石6是垃圾。而且它不会支持我正在制作的web应用程序中的许多其他东西…@ricebowl：如果我的用户正在使用IE6，那么他们可能根本不知道如何使用我的应用程序。。。所以…这是一个有效的，值得的观点，先生。我倾向于同意；我只是有一个本能的“考虑用户！”内置。有时这是有用的，其他时候…不太有用。那么答案对你来说合适吗？=）
<div id="container">
<p>SOME TEXT</p>
</div>

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

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

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

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