Question

您好，我遇到了简单的垂直对齐问题。我希望紫色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

Answer 2

将文本换行到内部div中，并在THAT div上设置display和vertical-align，同时将height设置为外部div的高度。见http://jsfiddle.net/z47Lphx4/

div中的文本不是垂直对齐的

2 个答案: