在小型设备（xs）中水平居中div内的多个div

Question

我的页面在div中有3个div。 在平板电脑和桌面屏幕中，它们看起来很好（中心对齐），但是在非常小的设备（如手机）上，内部div保持对齐（我希望它们水平居中对齐）。 我将文本中心和中心块应用于外部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> 

我的原因是图片的宽度是281像素，如果我没有设置宽度，img之后的div的宽度将大于281像素，这不是我想要的。 正如您在此图片中看到的那样，图像都是左对齐的

Answer 1

使用文字对齐：中心;

text-align:center

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

Plunker链接：

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

Answer 2

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

Answer 3

我添加了一个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>