水平居中多个div在小型设备一个div内（XS）

Question

我的页面具有一个div内3个格（一个或多个）。在平板电脑和桌面屏幕上，它们看起来不错（中心对齐），但是在像手机这样的非常小的设备上，内部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像素，这是不是我想要的东西。 as you can see in this picture, the images are all left-aligned

Answer 1

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

Answer 2

使用 文本对齐：center;

text-align:center 

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

Plunker链接：

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

Answer 3

你不应该适用类外的div，将它们应用需要准确地为中心的内容：类= “IMG-响应中心块”，和 也检查Bootstrap版本中心块是Bootstrap 3.0.1版本中的新增功能，我相信。