例如,我有一个 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__|
最佳答案
如果您真的不想换行
您可以通过将 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;
}
如果您可以选择换行(也就是正确的方式)
您确实应该包装您的文本。除了语义之外,您还可以在样式选项中获得更大的灵 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;
}
关于javascript - 如何在不将文本包装在任何标记中的情况下将文本对齐到 div 的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29235608/