在小型设备 (xs) 的 div 内水平居中多个 divs

Question

我的页面在 div 中有 3 div(s)。在平板电脑和台式机屏幕上，它们看起来不错（居中对齐），但在手机等非常小的设备上，内部 div(s) 是左对齐的（我希望它们水平居中对齐）。我将 text-center 和 center-block 应用于外部 div 但它不起作用。有什么建议吗？这是 html 和 css 代码。

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
portfolio-caption {
 max-width: 281px;
 background-color: #994ACC;
 text-align: center;
 padding: 10px;
 border-top: 3px solid #ffffff;
 margin-bottom: 10px;
 }

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div style="max-width: 281px">
      <a href="#" ">
                        <img src="./x/pilotproject1.jpg " class="img-responsive " style="margin: 0 auto; " alt=" ">
                    </a>
                    <div class="portfolio-caption text-center ">
                        <strong><h4>Project Name</h4></strong>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 ">
                <div style="max-width: 281px ">
                    <a href="# "> 
                        <img src="./x/pilotproject2.jpg " class="img-responsive " 
                        style="margin: 0 auto; " alt=" ">
                    </a>
                    <div class="portfolio-caption text-center ">
                        <strong><h4>Project Name</h4></strong>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 ">
                <div style="max-width: 281px ">
                    <a href="# " class="pilot-link ">
                        <img src="./x/pilotproject3.jpg " class="img-responsive " 
                         style="margin: 0 auto; " alt=" ">
                    </a>
                    <div class="portfolio-caption text-center ">
                        <strong><h4>Project Name</h4></strong>
                    </div>
                </div>
            </div>
        </div>

我的原因是图片的宽度是281px，如果不设置宽度，img后面的div宽度会比281px大这不是我想要的。 as you can see in this picture, the images are all left-aligned

Answer 1

使用文本对齐：居中；

text-align:center

<div style="max-width: 281px; text-align : center">

笨蛋 link :

https://plnkr.co/edit/UaW436KiylzfqOCU1cg1?p=preview

Answer 2

您不应该将 classes 应用于外部 div，将它们准确地应用于您想要居中的内容：class="img-responsive center-block"，以及还要检查 bootstrap 版本 center-block 是 Bootstrap 版本 3.0.1 中的新内容，我相信。

Answer 3

我添加了一个class centered作为居中元素的容器（请去掉边框border: 1px solid red; 它是用来显示容器块):

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid red;
}

.img-responsive {
  display: block;
  max-width: 281px !important;
  height: auto;
  margin: 0 auto; 
}

包裹您想要居中的每个元素。

另外在你的cssportfolio-caption应该是.portfolio-caption到select一个class.

我将你的内联样式移到了 css class img-responsive 这样你就可以在一个地方更新你的样式。

.img-responsive {
  display: block;
  max-width: 281px !important;
  height: auto;
  margin: 0 auto; 
}

.portfolio-caption {
  width: 281px;
  background-color: #994ACC;
  text-align: center;
  padding: 10px;
  border-top: 3px solid #ffffff;
  margin-bottom: 10px;
  float: right;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* border: 1px solid red; */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="centered">
      <a href="#">
        <img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
      </a>
    </div>
    <div class="centered">
      <div class="portfolio-caption text-center ">
        <strong><h4>Project Name</h4></strong>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="centered">
      <a href="# ">
        <img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
      </a>
    </div>
    <div class="centered">
      <div class="portfolio-caption">
        <strong><h4>Project Name</h4></strong>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="centered">
      <a href="# " class="pilot-link ">
        <img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
      </a>
    </div>
    <div class="centered">
      <div class="portfolio-caption text-center ">
        <strong><h4>Project Name</h4></strong>
      </div>
    </div>
  </div>
</div>

在小型设备 (xs) 的 div 内水平居中多个 divs

horizontally center multiple divs within a div in small devices (xs)

html

twitter-bootstrap

css

web-frontend