垂直對齊列中的圖像

我正在使用引導程序，我似乎無法找到垂直居中放置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

垂直對齊列中的圖像

回答

相關問題