javascript - 如何在不将文本包装在任何标记中的情况下将文本对齐到 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

如果您真的不想换行

您可以通过将 block 的display设置为table-cell，然后将vertical-align设置为来实现底部。这是我能想到的将文本与 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 example.

如果您可以选择换行(也就是正确的方式)

您确实应该包装您的文本。除了语义之外，您还可以在样式选项中获得更大的灵 active 。

一旦你这样做了，你的 div 就可以设置为 position: relative 这样它就可以充当 child 的容器， child 将获得 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;
 }

Example