Question

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

的方法

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

fiddle

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

作品。

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

2 个答案: