Question

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

Answer 1

我使用flex显示来垂直对齐内容。

for i=1:R

    for j=1:R

        Red1 = Red1 + abs(corr (SelectedData,i,j));

    end

end

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

See it in action

Answer 2

试试这个，可能会对你有帮助

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

Answer 3

您可以尝试使用css属性display: table向父级和display: table-cell向子级，我们可以实现内容以垂直居中对齐，并且还具有浏览器兼容性。

如何在中间垂直对齐div？

3 个答案: