问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在使用 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; 时，这意味着它应该从每一侧都相等。正确的？但为什么图像没有水平居中？

原文由 david 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csshtmlcenter
阅读 250
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用 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>

原文由 Peter Wilson 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

通过 margin: 0 auto;

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

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

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

原文由 GROVER. 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题