如何在中间垂直对齐div？

我创造了这个排，引导3：如何在中间垂直对齐div？

<div class="cart"> 
<div class="row border"> 
    <div class="col-md-8 desc pad itemsheight"> 
    <div class="col-md-12"> 
     <!-- react-text: 141 -->Docos 
     <!-- /react-text --> 
     <!-- react-text: 142 -->channel package 
     <!-- /react-text --> 
    </div> 
    <div class="col-md-12 small"><a href="">Change</a> 
     <!-- react-text: 145 -->| 
     <!-- /react-text --><a href="">Remove</a></div> 
    </div> 
    <div class="col-md-2 desc grey pad itemsheight"></div> 
    <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div> 
</div> 
    </div>

的问题是，文本不垂直对齐，中间对齐。我试图使用垂直对齐，但不起作用？下面是另一个例子：http://codepen.io/gekkerkanniet/pen/jVKoyR

来源

2016-12-09 bier hier

你试图对齐到垂直中心的哪个文本？ –

左边的一个包装文本与它下面的链接 –

我用柔性显示器垂直对齐的内容。

.vCenterItems { 
    display: flex; 
    align-items: center; 
}

也从每个单独的元素中删除高度并仅应用于父元素。这将更容易改变身高。

See it in action

来源

2016-12-09 06:44:09

伟大的答案谢谢 –

试试这个，可能是这将帮助你

/*************Cart******************/ 
 
.center-block { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    display:block; 
 
} 
 
// in case your dealing with a inline element apply this to the parent 
 
.text-center { 
 
    text-align:center 
 
} 
 
.children{ 
 
    
 
    
 
    position: relative; 
 
    top: 35%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.cart .pad { 
 
    margin-top: 8px; 
 
    padding: 2px; 
 
} 
 
.cart .padheader { 
 
    padding: 17px; 
 
} 
 
.cart .border { 
 
    border: solid 0.5px; 
 
} 
 

 
.cart .right { 
 
    text-align: right; 
 
} 
 
.cart .costs { 
 
    padding: 2px; 
 
    margin-top: 10px; 
 
} 
 
.cart .medium { 
 
    font-size: 24px; 
 
    line-height: 53px; 
 
} 
 
.cart .small { 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
} 
 
.cart .itemsheaderheight { 
 
    height: 68px; 
 
} 
 
.cart .itemsheight { 
 
    height: 97px; 
 
} 
 
.cart .space { 
 
    padding: 17px; 
 
} 
 
.cart .grey { 
 
    background-color: #f7f7f7; 
 
} 
 
.cart .yourorder { 
 
    font-family: "Helvetica"; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    text-align: left; 
 
    color: #333333; 
 
} 
 
.cart .price { 
 
    font-family: Helvetica; 
 
    font-size: 40px; 
 
} 
 
.cart .desc { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 
.cart .border-bottom { 
 
    border-bottom: lightgray solid 0.5px; 
 
} 
 
.cart .border-top { 
 
    border-top: lightgray solid 0.5px; 
 
} 
 
.cart .collapse { 
 
    display: none; 
 
} 
 
.cart .collapse.in { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>A Pen by Derk Ingen</title> 
 
    
 
    
 
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> 
 

 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
    <div class="cart"> 
 
<div class="row border"> 
 
    <div class="col-md-8 desc pad itemsheight center-block"> 
 
    <div class="col-md-12 text-center children"> 
 
     <!-- react-text: 141 -->Docos 
 
     <!-- /react-text --> 
 
     <!-- react-text: 142 -->channel package 
 
     <!-- /react-text --> 
 
    </div> 
 
    <div class="col-md-12 small text-center children"><a href="">Change</a> 
 
     <!-- react-text: 145 -->| 
 
     <!-- /react-text --><a href="">Remove</a></div> 
 
    </div> 
 
    <div class="col-md-2 desc grey pad itemsheight"></div> 
 
    <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div> 
 
</div> 
 
    </div> 
 
    
 
    
 
</body> 
 
</html>

来源

2016-12-09 06:24:23

您可以用CSS属性display: table到家长和display: table-cell孩子，在这里我们可以实现内容的对齐垂直居中尝试，它也有一个浏览器compatablity。

来源

2016-12-09 06:57:16

如何在中间垂直对齐div？

回答

相关问题