Question

所以我得到了这个： minio-js

我希望浓缩咖啡机在色谱柱内居中，而不是在旁边，不是左侧，而是在中间。

这是我已经获得的代码（由于某些原因，jsfiddle没有工作，所以我只是为了代码而在这里发布。）

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

http://i.imgur.com/EkmIEOx.jpg?1

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

使用flexbox

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

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

Answer 3

图像是内联元素，因此如果您为父元素提供引导类＆＃34; text-center＆＃34;你是任何内联元素的中心。这将包括文本。

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

作为文本中心类的替代选项，您可以添加类＆＃34; center-block＆＃34;到实际的形象。这使得图像成为块元素，并以＆＃34; margin-left：auto，margin-right：auto＆＃34;为中心。使用中心块也意味着你也可以使用＆＃34; img-responsive＆＃34;并使图像居中。

有关更多信息，请查看bootstrap帮助程序类：

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

Answer 4

尝试这样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;
}

将一个div置于Bootstrap列中

4 个答案: