<div> 内 <p> 文本的垂直对齐

Question

好了，言归正传：

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

div {
    display: inline-block;
    float:left;
    height: 4em;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

这是 html:

<div>      
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>

当 p 有多行文本时，我不知道如何垂直对齐 div 中的 p。我该怎么做？

Answer 1

您可以尝试以下方法。

将 display: table-cell 应用于 p 元素，然后使用 vertical-align: middle 规则获得您需要的垂直对齐方式。

请注意，我增加了父块的高度以显示效果。

p {
  margin: 0px;
  padding: 0px;
  text-align: justify;
  font-weight: normal;
  font-size: 0.8em;
  display: table-cell;
  vertical-align: middle;
  height: inherit;
}
div {
  display: inline-block;
  float: left;
  height: 12em;
  width: 20%;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-weight: bold;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 1px;
  border: 1px dotted blue;
}

<div>
  <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

Answer 2

Here 是有关居中元素的完整指南。解决方案很少：

老方法，使用table:

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

.table {
    display: table;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}

<div class="table">
    <div class="row">
        <div class="cell">
            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </div>
    </div>
</div>

使用 flexbox

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

.flex {
    display: flex;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
    align-items: center;
}

<div class="flex">

            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

对绝对定位元素使用转换

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.relative {
    position: relative;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

<div class="relative">
    <p>content goes here</p>  
</div>

我会选择 flexbox 方法

<div> 内 <p> 文本的垂直对齐

Vertical align of <p> text inside <div>

html

css

vertical-alignment