调整文本元素的大小

Question

我试图让我的文本元素在一个更大的div中垂直居中，这个div用蓝色着色。我特意定义了高度和对齐方式如下：

{{1}}

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

Answer 1

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

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

jsfiddle

Answer 2

您可以通过多种方式执行此操作：

1. 以中心为中心：
＆＃13;
＆＃13;
div.div{
  text-align: center;
}
＆＃13;
<div class="div">
   Hello world!
 </div>
＆＃13;
＆＃13;
＆＃13;
1. 使用p标签将文本与中心对齐
＆＃13;
＆＃13;
div.div{
  background-color: #00ff00
}
p.p{
  text-align: center;
}
＆＃13;
<div class="div">
  <p class="p">Hello World!</p>
 </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

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