Question

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

＆＃13;

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

＆＃13;

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

Answer 1

以margin: 0 auto;

为中心

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

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

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

Answer 2

您可以使用弹性框来实现此目的：

<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

＆＃13;

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

＆＃13;

Answer 4

您还可以使用简单的html中心标记：

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

如何将图像置于网格col中？

4 个答案: