logo标签列表

如何将div垂直居中对齐？

htmlcsstwitter-bootstrap-3
5

我使用Bootstrap 3创建了这一行：

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

问题在于文本不垂直居中对齐。我尝试使用vertical-align但不起作用？这里是另一个样例：http://codepen.io/gekkerkanniet/pen/jVKoyR
你尝试将哪个文本垂直居中对齐？ - Sen Jacob
左侧一个包含链接的文本包。 - bier hier
3个回答
6

我使用了Flex布局来垂直对齐内容。

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

同时将每个单独元素的高度删除，并仅应用于父元素。这样更容易改变高度。

查看实例

1
尝试这个，也许会有帮助。 

/*************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>

0
您可以尝试使用CSS属性display: table来设置父元素，以及display: table-cell来设置子元素。这样我们就可以实现内容垂直居中对齐，并且还具有浏览器兼容性。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接