Question

我有一个段落<p class="timeNum">00:00</p>（只有一个带有文字的元素），我想只移动文本区域中间/顶部/底部的文字（我不是垂直的意思）段落，但在它自己的文本区域（用鼠标标记文本时的蓝色区域））。当我将行高更改为等于字体大小时，它没有帮助。垂直对齐也没有帮助。文本区域变小，但文本保持在底部/基线。有谁能提出解决方案。谢谢！

html - ＆gt; <p class="timeNum">Text</p>

css - ＆gt;

 .timeNum {
    font-size: 24px;
    line-height: 24px;
    text-align: right;
  }

text in a paragraph

Answer 1

你应该试试

display: table-cell;
vertical-align: middle;

有关更多信息，请查看此SO post

Answer 2

如果它有一个包装器你可以试试这个：

.wrapper { 
postion: relative
}
.textNum {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这会将所有内容放在其父元素的中间。理论上它应该有效。这是因为顶部和左侧值在父级的宽度处定向。但是，转换值将自己定位在元素本身的宽度上。

Answer 3

试试这个

.border-box {
  width:200px;
  height:200px;
  border:1px solid #ddd;
  float:left;
  text-align:center;
  display:table;
}
.border-box p {
  display:table-cell;
  vertical-align:middle;
}

<div class="border-box">
  <p>this is for your information</p>
</div>

CSS在段落/ div中垂直居中文本......？

3 个答案: