html - 为什么使用 display:table 进行垂直对齐对我不起作用？

Question

我想在 div 内垂直对齐文本，可能有几行。

来自CCS-tricks 的方法

HTML：

   <div class="tutorial_step">
   <div style="display: table">
   <p>text<p/></div>
   </div> 

CSS：

.tutorial_step{
    width: 400px;
    text-align: left;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    font-size: 15px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid lightgray;
    border-left:none;
    height: 350px;
     font-weight: bold;
    color:  #525252;
    background: #f9f9f9;}

.tutorial_step p{
    display: table-cell;
    vertical-align: middle;
    }    

小提琴

Answer 1

您必须定义height“表”height的大小，否则将是<p>：

<div class="tutorial_step">
   <div style="display:table; height:100%;">
       <p>text</p>
   </div>
</div> 

演示：http: //jsfiddle.net/dirtyd77/3nTR9/3/

Answer 2

在这种情况下，您需要将这些样式添加到容器中。中的文本p是垂直对齐的，但仅在其p自身内，没有明确的高度。

    .tutorial_step {
        width: 400px;
        text-align: left;
        display: inline-block;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
        font-size: 15px;
        padding-left: 20px;
        padding-right: 20px;
        border: 1px solid lightgray;
        border-left:none;
        height: 350px;
         font-weight: bold;
        color:  #525252;
        background: #f9f9f9;
        display: table-cell;
        vertical-align: middle;
        }    

作品。