我试图在中间垂直对齐<div>文本。这是我试过的JSFiddle。但这对我不起作用。

.cart_channels_main {
  float: left;
  height: 285px;
  margin: 0 18px 15px 0;
  text-align: center;
  width: 100%;
  vertical-align: middle;
}
.cbheading {
  background: #000 none repeat scroll 0 0;
  color: #c7a375;
  height: 30px;
  padding: 5px;
  font-family: "Roboto Condensed", sans-serif !important;
  vertical-align: middle;
}

<div class="col-sm-3">
  <div class="cart_channels_main">
    <div class="cbheading"><b>vertical align middle</b>
    </div>
  </div>
</div>

有时我有两行文字,所以如果我使用边距或行高的填充,它将不适用于两行文字。就像在这个例子中LINK

最佳答案

试试这个

.cbheading {
    background: #000 none repeat scroll 0 0;
    color: #c7a375;
    height: 30px;
    padding: 5px;
     font-family: "Roboto Condensed",sans-serif !important;
    vertical-align:middle;
    line-height: 30px;//added
}

Demo
为你
.cbheading {
    background: #000;
    color: #c7a375;
    padding: 5px;
    height: 30px;
    display: table;
    width: calc(100% - 10px);
}
.cbheading b {
    display: table-cell;
    vertical-align: middle;
}

关于html - 垂直对齐:文本上的中间不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32557959/

10-12 04:08
查看更多