沒有浮動的垂直中心圖像：無

Question

我發現了幾個這樣的問題，但我找不到答案：是否可以在每個col-xs-1引導單元中垂直居中放置圖像，但不要殺死流體帶浮點的網格系統：無？ 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; 
} 

請取消註釋浮動：無;在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%); 
}