div中的文本未垂直對齊

Question

jsfiddle.net/6knk8qLc/

您好，我在進行簡單的垂直對齊時遇到了麻煩。 我希望紫色div的文本垂直位於div的中間，而不是太靠近頂部。 我試過了：

display: table-cell;
vertical-align:middle;

這些不起作用。 我是否缺少明顯的東西？

Answer 1

創建一個包裝器..檢查一下：

CSS

.category-description{
    width:600px;
    height:140px;
    background:#C6C;
    padding: 30px;
    display: table;
    float:left;
}

.category-description div{
    display: table-cell;
    vertical-align: middle;
}

h2{
    font-family:arial,verdana,helvetica,sans-serif;
    font-size:14px;
    color:#201c1f;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    margin:0;
    padding: 0 0 10px 0;
}

p{
    font-family:arial,verdana,helvetica,sans-serif;
    font-size:14px;
    color:#333333;
    text-decoration:none;
    margin:0 0 0px 0;
    padding:0 0 0 0px;
}

HTML

<div class="category-description">
    <div>
      <h2>Retrospex Adept</h2>
      <p>Retail Price: £79.99</p>
      <p>Wholesale Price: Contact Us</p>
      <p>Affiliate Commission: 12.5%</p>
      <p>In Stock: Yes</p>
      <p><span style="padding-top:10px;display: inline-block">View More</span></p>
    </div>
</div>

此處演示

Answer 2

將文本換成內部div，然后在THAT div上設置display和vertical-align ，以及將height設置為外部div的高度。 參見http://jsfiddle.net/z47Lphx4/