Wie kann ich diese divs zentrieren, um auf einem mobilen Gerät korrekt zu funktionieren?

Question

Ich arbeite von einem HTML-Template, um meine HTML-Kenntnisse zu verbessern. Ich bemerkte, dass, wenn der Browser klein ist, werden alle Abschnitte verankern perfekt auf die Mitte des Displays, mit einer Ausnahme (die letzte)

Screenshots anzeigen:

Desktop (funktionierend)

aber sobald ich an eine mobile Ansicht, wie die Größe:

wie Sie die ersten 2 perfekt sehen können, sind zentriert, aber der letzte auf der linken Seite verankert ist. Ich glaube, es hat mit der Menge an Text in Abschnitt zu tun ... Bedeutung gibt es in der Tat standardmäßig keine Zentrierung in dieser Vorlage ...

Hier ist mein Code

<div class="row mainFeatures" id="AboutUs"> 
     <div class="col-sm-4 col-md-4"> 
      <div class="img-thumbnail"> 
       <img src="~/images/experience-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>Experience</h4> 
        <p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-md-4"> 
      <div class="img-thumbnail"> 
       <img src="~/images/quality-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>Quality</h4> 
        <p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-4 col-md-4"> 
      <div class="img-thumbnail"> 
       <img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>User-Friendly</h4> 
        <p>Most importantly, our products are easy to use and functional.<br /></p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Verwenden text-center auf jeder Spalte: http://www.codeply.com/go/fruF23dSys

<div class="row mainFeatures" id="AboutUs"> 
     <div class="col-sm-4 text-center"> 
      <div class="img-thumbnail"> 
       <img src="~/images/experience-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>Experience</h4> 
        <p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 text-center"> 
      <div class="img-thumbnail"> 
       <img src="~/images/quality-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>Quality</h4> 
        <p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-4 text-center"> 
      <div class="img-thumbnail"> 
       <img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure"> 
       <div class="caption"> 
        <h4>User-Friendly</h4> 
        <p>Most importantly, our products are easy to use and functional. 
         <br> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 

Hinweis - Es gibt keinen Grund, beide col-sm-4 col-md-4 zu verwenden. col-sm-4 bedeutet 4 Einheiten auf sm und höher.

Answer 2

Nur Bootstrap 'col-sm-4 col-xs-12' Klassen in Ihrem div hinzufügen

<div class="row mainFeatures" id="AboutUs"> 
    <div class="col-sm-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="img-thumbnail"> 
      <img src="~/images/experience-icon.png" width="85" height="88" alt="secure"> 
      <div class="caption"> 
       <h4>Experience</h4> 
       <p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="img-thumbnail"> 
      <img src="~/images/quality-icon.png" width="85" height="88" alt="secure"> 
      <div class="caption"> 
       <h4>Quality</h4> 
       <p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p> 
      </div> 
     </div> 
    </div> 

    <div class="col-sm-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="img-thumbnail"> 
      <img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure"> 
      <div class="caption"> 
       <h4>User-Friendly</h4> 
       <p>Most importantly, our products are easy to use and functional.<br /></p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

(bearbeitet)

Versuchen Sie, diese CSS hinzufügen:

#AboutUs > div { 
text-align: center; 
} 

Es konzentriert sich .img-thumbnail Element innerhalb seines übergeordneten Container, was wichtig ist, wenn die Behälter nicht volle Breite nicht erreicht wegen des Inhalts (Standardmäßig sind sie linksbündig ausgerichtet, nur bei der dritten, die weniger Inhalt enthält.)

Answer 4

Sie können Medienabfragen verwenden, um mit Responsive Design umzugehen. Sie können mehr über die Medienabfrage here erfahren. aber das sollte Ihnen für das aktuelle Problem helfen. geben Sie eine ID oder etwas und behandeln Sie Stil für mobile Geräte separat.

@media (max-width:700px) { 
     #your_last_div{ 
      float: none; 
     } 
} 

Answer 5

Verwendung text-center Klasseninhalt Mittelposition auszurichten, schließen Sie das img-thumbnail div nach Bildtag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> 
 

 

 
<div class="row mainFeatures" id="AboutUs"> 
 
    
 
<div class="col-sm-4 col-xs-12 text-center"> 
 
<div class="img-thumbnail"> 
 
<img src="~/images/experience-icon.png" width="85" height="88" alt="secure"></div> 
 
<div class="caption"> 
 
<h4>Experience</h4> 
 
<p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p> 
 
</div> 
 
</div> 
 
    
 
<div class="col-sm-4 col-xs-12 text-center"> 
 
<div class="img-thumbnail"> 
 
<img src="~/images/quality-icon.png" width="85" height="88" alt="secure"> 
 
</div> 
 
<div class="caption"> 
 
<h4>Quality</h4> 
 
<p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p> 
 
</div> 
 
</div> 
 

 
<div class="col-sm-4 col-xs-12 text-center"> 
 
<div class="img-thumbnail"> 
 
<img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure"> 
 
</div> 
 
<div class="caption"> 
 
<h4>User-Friendly</h4> 
 
<p>Most importantly, our products are easy to use and functional.<br /></p> 
 
</div> 
 
</div> 
 
     
 
</div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>