1

div内のテキストを垂直に揃えたいのですが、数行ある場合があります。

CCS-トリックからの方法

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

フィドル

4

2 に答える 2

2

height「テーブル」の を定義する必要があります。定義しない場合、heightは のサイズになります<p>:

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

デモ: http://jsfiddle.net/dirtyd77/3nTR9/3/

于 2013-07-25T17:47:55.703 に答える
1

この場合、これらのスタイルをコンテナーに追加する必要があります。のテキストは垂直方向に配置されますが、明示的な高さを持たないテキスト自体の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;
        }

動作します。

于 2013-07-25T17:47:43.407 に答える