调整文本元素的大小

时间:2016-01-21 01:12:19

标签: html alignment center

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

{{1}}

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

My image

3 个答案:

答案 0 :(得分:0)

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

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

jsfiddle

答案 1 :(得分:0)

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

  1. 以中心为中心:
  2. 
    
    div.div{
      text-align: center;
    }
    
    <div class="div">
       Hello world!
     </div>
    &#13;
    &#13;
    &#13;

    1. 使用p标签将文本与中心对齐
    2. &#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;

答案 2 :(得分:0)

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