调整文本元素的大小答案

【问题标题】：Resizing Text Element调整文本元素的大小
【发布时间】：2016-01-21 10:26:12
【问题描述】：

我试图让我的文本元素在一个较大的 div 中垂直居中，该 div 是蓝色的。我具体定义了高度和对齐方式如下：

vertical-align: top; //middle actually puts it even lower
height: 83px; //the same as the larger area

但是，我不能让它在蓝色框的中心垂直对齐。任何帮助将不胜感激！

【问题讨论】：

【解决方案1】：

您可以通过多种方式做到这一点：

div.div{
  text-align: center;
}

<div class="div">
   Hello world!
 </div>

div.div{
  background-color: #00ff00
}
p.p{
  text-align: center;
}

<div class="div">
  <p class="p">Hello World!</p>
 </div>

【讨论】：

【解决方案2】：

您可以将蓝色的div 位置设置为relative，然后将以下内容添加到您的测试类中：

.test{
     position:absolute;
     top:calc(50% - 38px); //76/2 = 38 to get the center of your span.
}

【讨论】：

【解决方案3】：

我找到了答案。我需要简单地将文本底部垂直对齐添加到作为浅蓝色 div 一部分的图像中。无论如何，感谢您的回答！

【讨论】：