html - 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>

DEMO HERE