垂直对齐列中的图像

我正在使用引导程序，我似乎无法找到垂直居中放置div的图像的解决方案。我环顾四周，发现了多种不同的解决方案，但实际上没有任何解决方案适合我垂直对齐列中的图像

我需要获得图像垂直居中，使其在与文本行。这是我需要它的样子的编辑版本。

我需要它响应与文本，所以我不能再补充保证金那里。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

感谢，丹尼尔。

来源

2017-02-03 Daniel Glynn Goodwin

最佳到目前为止，我发现是这样的：

howtocenterincss.com

它会告诉你如何中心东西到任何其他的事情，无论垂直或水平。只要照顾不要搞乱布局的其余部分。

因此，对于您的具体使用情况：

我们不知道文本的高度，无论是图像的大小，这是inline-block的元素。

响应： <div style="display:flex;align-items:center;">Text Content</div>

所以我们申请：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container"> 
 
    <div class="col-md-6" style="display:flex;align-items:center;"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-03 18:16:10 LordNeo

这是一条评论不是answser，除非你想建立一个示例的片段，并解释围绕它:) –

感谢您的评论@GCyrillus，我会 – LordNeo

谢谢你的英雄。有效。 –

，你可以覆盖引导带班并使用柔性。
or look for the flex version of bootstrap并使用内置类

添加一个类和CSS

.flex { 
 
    display:flex; 
 
    flex-flow:wrap; 
 
    align-items:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container flex"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

链接来引导，柔性版，并使用类：d-flex flex-wrap align-items-cent

img { 
 
    max-width:100%; 
 
}

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container d-flex flex-wrap align-items-center"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-03 18:24:21

垂直对齐列中的图像

回答

相关问题