【问题标题】: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

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

【问题讨论】:

标签: html alignment center


【解决方案1】:

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

  1. 居中分区:

div.div{
  text-align: center;
}
<div class="div">
   Hello world!
 </div>
  1. 使用 p 标签使文本居中对齐

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.
    }
    

    jsfiddle

    【讨论】:

    • 哦,对不起!我的意思是要求在浅蓝色框中进行垂直对齐。橙色边框表示文本元素的区域(如您所见,即使我将高度设置为相同,它的高度也与蓝色框不同)。
    • 哦好吧,有点不清楚,误会见谅
    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-06-13
      • 1970-01-01
      • 2017-07-28
      • 2020-06-09
      • 2017-03-09
      • 1970-01-01
      • 2020-02-21
      • 1970-01-01
      相关资源
      最近更新 更多