垂直对齐图像与近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

回答

相关问题