html - 垂直对齐不起作用 - 希望内容位于我的 div 中间

Question

我试图垂直对齐一个 div 中的所有内容，但我不知道该怎么做，因为垂直对齐 css 代码无法完成这项工作。我试图做到这一点，而不是 div 内的所有内容都位于 div 的顶部，如果你明白我的意思，我希望它位于中心。

如有任何帮助，我们将不胜感激。谢谢

HTML:

<div id="add_to_cart_box">
<p class="cart_box_small">RRP: £<span style="text-decoration:line-through;">29.99</span></p>
<p class="cart_box_large">Our Price: £19.99</p>
<p class="cart_box_small">YOU SAVE: £10.00 (33%)</p>
<div class="add_to_cart_buttons">Quantity: n Dropdown, BUY BUT</div>
<p class="cart_box_small">FREE UK Delivery. Express delivery services available. In Stock. Same day dispatch if ordered before 2pm.</p>
<p class="cart_box_small">14 DAY MONEY BACK GUARANTEE.</p>
<p class="cart_box_small">3 MONTH  WARRANTY.</p>
</div>

CSS:

#add_to_cart_box{
    width:300px;
height:230px;
border:1px solid #a0a0a0;
padding: 10px 0 10px 0;
margin: 0 0 0 10px;}

.add_to_cart_buttons{
background:#FF0;
background:#91ae63;
padding:20px 10px 20px 10px;
margin:10px 0 10px 0;
text-align:center;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;}

p.cart_box_small{
font-family:arial,verdana,helvetica,sans-serif;
font-size:12px;
color:#333333;
text-decoration:none;
font-weight:100;
padding:0 10px 0 10px;
margin:0;
text-align:center;}

p.cart_box_large{
font-family:arial,verdana,helvetica,sans-serif;
font-size:16px;
color:#333333;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
padding:5px 10px 5px 10px;
margin:0;
text-align:center;}

Answer 1

如果您想要 div 中的所有内容垂直居中对齐。

试试这个:

在#add_to_cart_box , 添加:

display:table;

在#add_to_cart_box里面div，添加另一个 div .例如:<div class="center">

向其中添加此 CSS:

.center{
    display: table-cell;
    vertical-align:middle;
}

JSFiddle Demo

更多信息 here 用于垂直对齐。

注意:IE7及以下不支持display:table;或 display: table-cell;