Question

我的页面在div中有3个div。在平板电脑和桌面屏幕中，它们看起来很好（中心对齐），但是在非常小的设备（如手机）上，内部div保持对齐（我希望它们水平居中对齐）。我将文本中心和中心块应用于外部div，但它不起作用。有什么建议吗？这是html和css代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我的原因是图片的宽度是281像素，如果我没有设置宽度，img之后的div的宽度将大于281像素，这不是我想要的。 as you can see in this picture, the images are all left-aligned

Answer 1

您不应该将类应用于外部div，将它们完全应用于您想要居中的位置：class =＆＃34; img-responsive center-block＆＃34;，和另请检查bootstrap版本中心块是Bootstrap 3.0.1版中的新功能。我相信。

Answer 2

我添加了一个课程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; 
}

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

同样在您的css中portfolio-caption应.portfolio-caption选择一个班级。

我将您的内嵌样式移至css类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内的多个div

2 个答案: