は、ブートストラップ欄

Question

内側のdivセンタリングだから私はこれを持っています真ん中。

これは私が持っているコードです（何らかの理由でjsfiddleが動作しないため、コードのためだけにここに投稿しています）。

#espresso-machine { 
 
    height: auto; 
 
    background-color: #C59989; 
 
    padding: 68px 0 0; 
 
} 
 

 
#espresso-machine p { 
 
    font-size: 14px; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: 400; 
 
    line-height: 20px; 
 
    font-family: 'Indie Flower', cursive; 
 
    font-size: 25px; 
 
    color: #000; 
 
    padding: 10px 50px 0px 0px; 
 
} 
 

 
#espresso-machine h4 { 
 
    color: #000; 
 
    font-family: 'Lily Script One', cursive; 
 
    font-size: 50px; 
 
    margin: 0; 
 
    padding-top: 20px; 
 
    padding-left: 0; 
 
}

<div id="espresso-machine"> 
 
    <div class="row row-centered"> 
 
    <div class="col-xs-6 col-lg-6"> 
 
     <img src="https://dummyimage.com/300x100/000/fff" class="hvr-grow"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <h4>Espresso machine</h4> 
 
     <p>An espresso machine brews coffee by forcing pressurized water near boiling point through a "puck" of ground coffee and a filter in order to produce a thick, concentrated coffee called espresso. The first machine for making espresso was built and patented in 1884 by Angelo Moriondo of Turin, Italy. An improved design was patented in 1901, which was bought by the founder of the "La Pavoni" company which from 1905 produced espresso machines commercially on a small scale in Milan. <br><br> 
 
     Multiple machine designs have been created to produce espresso. Several machines share some common elements, such as a grouphead and a portafilter. An espresso machine[1] may also have a steam wand which is used to steam and froth liquids, to include milk, for coffee drinks such as cappuccino and caffe latte. Espresso machines may be steam-driven, piston-driven, pump-driven, or air-pump-driven. Machines may be manual or automatic.</p> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/jok2c383/

Answer 1

次のように試してみてください。あなたのフィドルあなたはフレキシボックスを使用したい場合がありhttps://jsfiddle.net/jok2c383/7/

<div class="col-xs-6 col-lg-6"> 
     <div class="col-md-6 col-md-offsset-3"> 
      <img src="img/espresso-cappuccino-machine.png" class="hvr-grow"> 
     </div> 
    </div> 

Answer 2

あまりにも更新され、ここでfiddle

94％のカバレッジhttp://caniuse.com/flexbox

.is-centered { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Answer 3

私はちょうどimage内に新しいdiv要素を追加し、このhttps://jsfiddle.net/jok2c383/17/

のように試してみてください画像を追加してこのCSSを追加してください：

.image { 
    width:100%; 
    text-align: center; 
    display:flex; 
    align-items: center; 
    justify-content: center; 
    height:100vh; 
flex-flow: column; 
} 

Answer 4

イメージはインライン要素なので、親要素に "text-center"のブートストラップクラスを指定すると、インライン要素がセンタリングされます。これにはテキストが含まれます。

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

は、テキスト・センタークラスの代替オプションとして、実際の画像へのクラス「センター・ブロック」を追加することができます。これはイメージをブロック要素にし、 "margin-left：auto、margin-right：auto"で中央に配置します。センターブロックを使用すると、「img-responsive」を使用して画像を中央に配置することもできます。

http://getbootstrap.com/css/#helper-classes