垂直對齊圖像與近div與Bootstrap

我想垂直對齊一個圖像與他的近div，該div有一個動態的高度，我有很多麻煩把圖像放在中間。有我的代碼：垂直對齊圖像與近div與Bootstrap

<div class="row"> 
    <img class="col-sm-4 col-md-4" src="/img/height.svg"></img> 
    <div class="col-sm-8 col-md-8"><span>Height</span><br/>335.00 mm</div> 
</div>

，其結果是：

我想要的圖像上的div像這樣的中間：

來源

2016-11-09 Troyer

添加您當前的CSS代碼段 –

目前我想了很多的資源我互聯網上找到，但他們沒有幫助，因此可以說的CSS是自舉默認的:) – Troyer

你試試這個：''

– Banzay

您可以使用如下的柔性盒：

.row { 
    align-items: center; 
    display: flex; 
} 
.row img { 
    height: 25px; 
    margin-right: 1rem; 
    width: 25px; 
}

見琴：https://jsfiddle.net/72f7srr6/1/

來源

2016-11-09 14:53:44

不錯的一個，只是我創建了這樣一個類： .row-center {-l} {align = items：center; display：flex; }我可以對齊圖像中心，謝謝:) – Troyer

如果我理解正確，你正在嘗試垂直對齊一個div，你必須在它的圖像另一個DIV。

垂直對齊div的最佳方法是將圖像作爲背景圖像，併爲該div設置一個高度，這將阻止高度變爲動態&它爲您提供更多控制。例如;

<!-- Div with BG Image --> 
<div class="col-sm-4 col-md-4"> 
    <div class="bg-image" style="background-image:url(/img/height.svg);"></div> 
</div> 

.bg-image { 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: cover; 
    height: 250px; // this can be anything 
} 

<!-- Div to be centrally aligned --> 
<div class="col-sm-4 col-md-4"> 
    <div class="bg-image-module"> 
    <div class="bg-image-module-block"> 
     <span>Height</span><br/>335.00 mm 
    </div> 
    </div> 
</div> 

Give the bg-image-module div these styles: 

.bg-image-module { 
    display: table; 
    height: 250px; //this must be the same as the height on the bg-image div in order to vertically align the content. 
} 

.bg-image-module-block { 
    display: table-cell; 
    vertical-align: middle; 
}

這是垂直對齊內容的好方法，你可以改變的高度是你需要什麼，它可以響應改變。

來源

2016-11-09 15:03:21

垂直對齊圖像與近div與Bootstrap

回答

相關問題