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;

Answer 2

您是否尝试过使用this？

我已经通过一个包装div和5个css行更新了你的css和html here

html补充道：

<div class="vert_align">***everything needing vertical aligment***</div>

css补充道：

.vert_align{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

vertical align not working - 希望内容位于我的div中间

2 个答案: