Question

我发现了一些像这样的问题，但我找不到答案：是否可以在每个col-xs-1引导单元格中垂直居中图像，但不要使用float：none来杀死流体网格系统？ jsfiddle project

HTML：

<div class="container">
<div class="row row-table">
  <div class="col-xs-1 col-xs-1-table-cell">
  </div>
  <div class="col-xs-1 col-xs-1-table-cell">
    <img src="http://placehold.it/50x50/" width="50" height="50"/>
  </div>
  <div class="col-xs-1 col-xs-1-table-cell">
    <img src="http://placehold.it/100x100/" width="100" height="100"/>
  </div>
</div>

的CSS：

div.row {
border: solid 1px blue;
}
 .row-table {
display: table;
width: 100%;
}
 div.col-xs-1 {
 width:150px !important;
 height:160px !important;
 border: solid 1px yellow;
}
.col-xs-1-table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
//    float:none;
}

请取消注释float：none;在css部分和图像将居中但细胞的流体布局将被打破（您可以更改浏览器窗口大小以尝试）

Answer 1

您需要在包含单元格上设置行高，以便垂直对齐。将它设置为与高度值相同，然后在img上应用vertical-align：middle应该有效。

JS Fiddle

CSS

div.col-xs-1 {
    width:150px !important;
    height:160px !important;
    border: solid 1px yellow;
    line-height: 160px;
}
.col-xs-1-table-cell {
   display: table-cell;
   text-align: center;
}

.col-xs-1-table-cell img {
   vertical-align: middle;
}

Answer 2

将position: relative添加到.col-xs-1，以便<img>相对于.col-xs-1绝对定位。使用http://css-tricks.com/centering-css-complete-guide/中的技术来定位<img>，就像这样

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

没有float的垂直中心图像：无

2 个答案: