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是关于居中元素的完整指南。解决方法很少：

旧方法，使用表：

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>

在absolut定位元素上使用转换

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方法

在</p> <div>中垂直对齐<p>文本

2 个答案: