ID为{

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

你不能以一种简单的方式做到这一点，至少不能跨浏览器你可以使用display：table; vertical-align：center;
您可以使用JS / CSS表达式你可以在div中有另一个元素，并将它相对于div设置为绝对值：

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

但实际上，就像我不想说的那样，桌子就是KISS（如果你需要veritcaly居中）。

Answer 3

TD可以垂直对齐文本垂直对齐，但这不适用于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 supported in most recent browsers

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

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

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

5 个答案:

ID为{