Javascript 如何将文本与div底部对齐，而不将文本包装在任何标记中？

例如，我有一个div：

<div>I am a square</div>

text align:center属性将文本对齐到div的中心，但文本仍保留在正方形的顶部，我想将文本推到正方形的底部。在这个图中看起来是这样的。如何在不使用任何类型的标记包装文本的情况下实现这一点

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

如果您真的不想包装文本

您可以通过将块的

显示设置为
表格单元格
，然后将
垂直对齐
设置为
底部
，来完成此操作。这是我唯一能想到的将文本与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;
 }



如果包装文本是一种选择（即正确的方式）

你真的应该包装你的文本。除了语义之外，您可以在样式选项中获得更大的灵活性

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

这种方法是首选的，因为您仍然可以按照预期设置div的样式

HTML:

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

 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;
 }


检查这里：我以前也看过。他所做的是，标题内容是一个包含文本的id。他给出了身份证的位置：绝对；左下角。#标题内容被包装在#标题中，因此position:absolute对#标题内容起作用。如果我将position absolute指定给div，则整个div将移动到网页底部，而文本的位置保持不变
 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;
 }