居中引導柱內一個div

Question

所以我有這樣的： http://i.imgur.com/EkmIEOx.jpg?1

我想塔內爲中心的咖啡機，而不是旁邊的未來，而不是安裝在左，右，但在中間。

這是我得到的代碼（由於某種原因，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

您可能需要使用Flexbox，就在這裏fiddle

94％的覆蓋率http://caniuse.com/flexbox

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

Answer 3

嘗試這樣https://jsfiddle.net/jok2c383/17/

我只需要添加新的div image內圖像並添加此CSS：

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

Answer 4

圖像是內聯元素，所以如果您給父元素引導類「文本中心」，您正在居中任何內聯元素。這將包括文字。

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