列内の画像を垂直に整列する

私はブートストラップを使用していますが、div内に画像を垂直方向にセンタリングするソリューションを見つけることができないようです。私は周りを見回し、複数の異なるソリューションを見つけたが、実際に私のために働いているものはありません。列内の画像を垂直に整列する

Here's an image of the problem

私はそれは、テキストに沿ったものであるように、その画像を上下中央に取得する必要があります。私はそれが必要なものの編集版です。

Image

私はそれがテキストで応答する必要があるので、私はちょうどそこにマージンを追加することはできません。

<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

それは、垂直または水平に、他の事には何もセンタリングする方法を教えてくれます。レイアウトの残りの部分を邪魔しないように注意してください。

は、だからあなたの特定のユースケースのために：

我々は、テキストの高さ、どちらも画像のサイズがわからない、それはインラインブロック要素です。

応答： <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

これは、あなたがその周りのスニペットや説明に例を設定するには:)コメント@GCyrillusため –

感謝をしない限り、私は – LordNeo

おかげで、あなたのヒーローますが、コメントではないanswserです。出来た。 –

あなたがクラスで、ブートストラップオーバーライドして、フレックスを使用することができます。
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

列内の画像を垂直に整列する

答えて

関連する問題