如何将文本对齐到div的底部而不将文本包装在任何标签中？

Question

例如，我有一个div：

<div>I am a square</div>

内部style.css：

 div:nth-child(1) {
 height: 200px;
 width: 200px;
 border-radius:0;
 background-color: pink;
 color: #fff;
 text-align: center;
}

text-align：center属性将文本在div的中心对齐，但是文本仍保留在正方形的顶部，我想将文本推到正方形的底部。 所以看起来像这张图。 如何在不将文本包装在任何标签中的情况下完成此操作？

 __________________
 |                |
 |                |
 |                |
 |                |
 |                |
 |_I am a square__|

Answer 1

如果您真的不想换行

您可以通过将块的display设置为table-cell ，然后vertical-align bottom 。 这是我可以想到的将文本对齐div底部而不将其包装在另一个元素中的唯一方法。 不过，这将导致您的div位置出现一系列其他问题； 而且您可能还是要包装div。

 div {
     height: 200px;
     width: 200px;
     border-radius:0;
     background-color: pink;
     color: #fff;
     text-align: center;
     /* Here is my addition */
     display: table-cell;
     vertical-align: bottom;
 }

JsFiddle示例。

如果您换行是一种选择（又是正确的方式）

您确实应该换行。 除了语义之外，您还可以在样式选择中获得更多的灵活性。

完成后，您可以将div设置为position: relative这样它就可以充当孩子的容器，孩子将获得position: absolute样式。 然后添加bottom: 0 ，瞧！ 它粘在底部。

此方法是首选方法，因为您仍可以按预期设置div的样式。

HTML：

<div>
    <p>test</p>
</div>
<div>
    <p>test</p>
</div>

CSS：

 div {
     height: 200px;
     width: 200px;
     border-radius:0;
     background-color: pink;
     color: #fff;
     text-align: center;
     margin : 0 3px 3px 0;
     /* Make sure that it contains the child properly */
     position: relative;
 }
 div p {
     position : absolute;
     bottom : 0;
 }

例