Центрирование DIV внутри колонны Bootstrap

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

Изображения являются встроенными элементами, поэтому, если вы передаете родительский элемент в класс начальной загрузки «text-center», вы центрируете любые встроенные элементы. Это будет включать текст.

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

В качестве альтернативного варианта в текст-центр класса можно добавить класс «центр-блок» на реальное изображение. Это делает изображение блочным элементом и центрирует его «margin-left: auto, margin-right: auto». Использование центрального блока также означает, что вы также можете использовать «img-отзывчивый» и центрировать изображение.

Посмотрите бутстрапом вспомогательные классы для получения дополнительной информации:

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