如何在网格列中居中图像？

Question

我正在使用 Bootstrap 网格系统并在每个列中显示一张图像，但我没有成功地将图像垂直和水平居中。这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
          crossorigin="anonymous">
    <style>
      .center_image {
        margin: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .vcenter {
        display: inline-block;
        vertical-align: middle;
        float: none;
      }
    </style>
  </head>
  <body>

    <!-- images section  -->
    <div class="container">
      <div class="row" style="display: flex; padding: 20px 0px 0px 0px;">
        <!-- image col1 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img style="width: 100%;"
               class="img-responsive center_image img-thumbnail" alt=""
               src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
        </div>
        <!--image col2 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img class="img-responsive center_image img-thumbnail"
               style="width: 100%;" alt=""
               src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
        </div>
      </div>
    </div>
  </body>
</html>

当margin:auto;时，这意味着它应该从每一边都相等。正确的？但为什么图像没有水平居中？

Answer 1

通过 margin: 0 auto;

居中

图像或 div 必须具有定义的宽度。

例如，在您的 CSS 中，试试这个：

.center_image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

Answer 2

您可以使用 flex box 来实现这一点：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
          crossorigin="anonymous">
    <style>
      .center_image {
        margin: auto;
        margin-left: auto;
        margin-right: auto;
      }
      .vcenter {
         display: flex;
         justify-content: center;
         align-items: center;
      }
    </style>
  </head>
  <body>

    <!-- images section  -->
    <div class="container">
      <div class="row" style="display: flex; padding: 20px 0px 0px 0px;">
        <!-- image col1 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img style="width: 100%;"
               class="img-responsive center_image img-thumbnail" alt=""
               src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
        </div>
        <!--image col2 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img class="img-responsive center_image img-thumbnail"
               style="width: 100%;" alt=""
               src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
          crossorigin="anonymous">
    <style>
    .vcenter {
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-align: center;
 align-items: center;
      }


    </style>
  </head>
  <body>

    <!-- images section  -->
    <div class="container">
      <div class="row" style="display: flex; padding: 20px 0px 0px 0px;">
        <!-- image col1 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img style="width: 100%;"
               class="img-responsive center_image img-thumbnail" alt=""
               src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
        </div>
        <!--image col2 -->
        <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter">
          <img class="img-responsive center_image img-thumbnail"
               style="width: 100%;" alt=""
               src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 4

您也可以使用简单的 html 中心标签：

<div class='row'>
  <div class='col'>
     <center>
        <img src='path' />
     </center>
   </div>
</div>

如何在网格列中居中图像？

How to center image inside grid col?

html

css

center