javascript - 在 Bootstrap 列中居中一个 div

标签 javascript jquery html css twitter-bootstrap

所以我得到了这个: 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/

最佳答案

这样试试。也更新了你的 fiddle 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>

关于javascript - 在 Bootstrap 列中居中一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37363203/

相关文章:

javascript - ChartJS折线图拖动和缩放

javascript - BluebirdJS promise jQuery 无法正常工作

Javascript - 显示循环中第三个键的对象值

css 父 div 和子 div 不能正常播放

javascript - 取一个最大尺寸的div,让它们都一样

javascript - 在 D3.js 中对大型 CSV 进行排序

javascript - 如何从父元素中删除事件并仅为其特定子元素启用该事件?

xml - HTML5中 "xmlns:v=urn:schemas-microsoft-com"是什么意思

javascript - 为不同的 HTML 形状填充颜色

javascript - Ajax 请求没有响应