Question

使用固定高度的容器，我只需使line-height属性与高度匹配。如果没有指定容器高度，你怎么做？

Answer 1

有几种方法。这是表格方法。另一种方法是使父容器相对并使p标签绝对为top：50％;。如果您不支持ie8或更低版本，则可以使用flexbox。这是学习flexbox的一个很好的资源：http://flexboxfroggy.com/

.container{
  width: 300px; 
  height: 400px; 
}

.content{
  width: 100%; 
  height: 70%; 
  display: table;
}

p{
  display: block; 
  display: table-cell; 
  vertical-align: middle; 
}

<div class="container">
  <div class="content">
   <p>
   Center text
   </p>
  </div>
</div>

Answer 2

#services .txt {
    height: 500px;
    border: 1px #000 solid;
    display:table;
    text-align:center;
}
.sub{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

<div id="services">
         <div class="txt">
            <div class="sub">
                    <h1>Lorem Ipsum</h1>
                    <p>  Lorem Ipsum is simply dummy text of the                            printing and typesetting industry. Lorem                          Ipsum has been the industry's standard                            dummy text ever since the 1500s..
                    </p>
            </div>
         </div>
</div>

现在尝试更改div .txt高度，您将看到它是垂直对齐的中心文本。

这种方式取决于make main div display：table;
和子div 显示：table-cell; 和 vertical-align：middle;

Answer 3

Numeric[(String, Int)]

未指定父高度时垂直居中文本

3 个答案: