horizontal mehrere Divs in einem Div in kleinen Geräten (xs)

Question

Meine Seite hat 3 div (s) innerhalb einer div. In Tablet- und Desktopbildschirmen sehen sie gut aus (zentriert), aber auf einem sehr kleinen Gerät wie einem Mobiltelefon sind die inneren div (s) ausgerichtet (ich möchte, dass sie horizontal mittig ausgerichtet sind). Ich habe Textcenter und Mittelblock auf das äußere div angewendet, aber es funktioniert nicht. Irgendein Vorschlag? Hier sind die HTML- und CSS-Codes.

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

Der Grund, dass ich habe, ist, dass die Breite der Bilder ist 281 Pixel, wenn ich nicht setzen die Breite, die die Breite des div, die nach der img größer werden einen als 281 px, was ich nicht möchte. as you can see in this picture, the images are all left-aligned

Answer 1

Ich habe eine Klasse centered als Containerelemente zum Zentrum (entfernen Sie die Grenze border: 1px solid red;es verwendet wird, der Container Block zu zeigen):

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

Wickeln Sie jeden Element Sie zentriert werden soll.

Auch in Ihrem css portfolio-caption sollte .portfolio-caption eine Klasse auswählen.

Ich habe Ihren Inline-Stil in die CSS-Klasse img-responsive verschoben, damit Sie Ihren Stil an einem Ort aktualisieren können.

.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

Verwendung Textausrichtung: Mitte;

text-align:center 

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

Plunker Link:

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

Answer 3

Sie sollten nicht Klassen gelten für Außen divs, gelten sie genau zu dem, was Sie zentriert werden soll: class = "img-responsive Mitte-Block", und überprüfen Sie auch die Bootstrap-Version Center-Block ist neu in Bootstrap Version 3.0.1 glaube ich.