html - 垂直居中图像没有 float :none

Question

我发现了一些这样的问题，但找不到答案:是否可以在每个 col-xs-1 Bootstrap 单元格中垂直居中图像，但不要使用 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;
}