Div mit Text wird nicht zentriert bleiben

Question

Ich erstelle eine einfache Bildergalerie. Über den Bildern nenne ich den Ort, an dem die Bilder gemacht wurden, aber die zweite und jede andere Reihe hat Probleme - div mit dem Namen wird nach rechts geschoben, anstatt zentriert zu bleiben. Hier ist, wie es aussieht: http://prntscr.com/fg10u4

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); 
 
.locationName { 
 
    text-align: center; 
 
    padding: 0px 0px 20px 20px; 
 
}

<div class="row" id="locations"> 
 

 
    <div class="locationName"> 
 
    City 
 
    </div> 
 

 
    <div class="col-lg-4 col-sm-6"> 
 
    <div class="thumbnail"> 
 
     <img src="2.jpg"> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-lg-4 col-sm-6"> 
 
    <div class="thumbnail"> 
 
     <img src="1.jpg"> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-lg-4 col-sm-6"> 
 
    <div class="thumbnail"> 
 
     <img src="2.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Offensichtlich wird der Code in der "Reihe" div verdoppelt.

Answer 1

ein 12 Stützenraster zur locationName Klasse hinzufügen, so dass es die ganze Reihe in Anspruch nimmt und eine Pause zwischen den anderen Spalten erzwingen. Wie Sie es gerade haben, versucht es, inline platziert zu werden, das nach dem längsten Bild ist.

<div class="row" id="locations"> 

    <div class="col-xs-12 locationName"> 
    City 
    </div> 

    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> 
     <img src="2.jpg"> 
    </div> 
    </div> 

    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> 
     <img src="1.jpg"> 
    </div> 
    </div> 

    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> 
     <img src="2.jpg"> 
    </div> 
    </div> 
</div> 

Answer 2

Sie Zentrum Tag wie diesem

<div class="row" id="locations"> 
 
    <center> 
 
     .... 
 
    </center> 
 
</div>

Answer 3

Looks verwenden können wie ein Konflikt mit dem Bootstrap ist Sie verwenden. Versuchen Sie, den Titel (Stadt) vor dem div mit der Klassenzeile zu verschieben.

<div class="locationName"> 
    City 
</div> 

<div class="row" id="locations"> 
    <div class="col-lg-4 col-sm-6"> 
     <div class="thumbnail"> 
      <img src="2.jpg"> 
     </div> 
    </div> 

    <div class="col-lg-4 col-sm-6"> 
     <div class="thumbnail"> 
      <img src="1.jpg"> 
     </div> 
    </div> 

    <div class="col-lg-4 col-sm-6"> 
     <div class="thumbnail"> 
      <img src="2.jpg"> 
     </div> 
    </div> 
</div> 

Answer 4

Ich sah Ihr Problem. tatsächlich gibt es einen Konflikt mit der Schachtelhöhe. Um dies schnell zu beheben, können Sie Ihre Daumenhöhe gleich erhöhen. oder Sie können den Beispielcode unten sehen.

<div class="row" id="locations"> 
    <div class="col-lg-12 col-sm-12 locationName">City</div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="2.jpg"> </div> 
    </div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="1.jpg"> </div> 
    </div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="2.jpg"> </div> 
    </div> 
    <div class="col-lg-12 col-sm-12 locationName"> City </div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="2.jpg"> </div> 
    </div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="1.jpg"> </div> 
    </div> 
    <div class="col-lg-4 col-sm-6"> 
    <div class="thumbnail"> <img src="2.jpg"> </div> 
    </div> 
</div> 

Answer 5

dies aus row Code unten bringen und das sollte, wie Sie wollen gehen.

<div class="locationName"> 
    City 
</div> 

Sie sind mit diesem Problem konfrontiert, weil Sie in dem Bild (Link) sehen Sie vorausgesetzt, dass die mittlere Bild leicht nach unten bewegt hat und somit es wirkt sich auf die Titel der nächste Zeile jedes Mal.

Answer 6

versuchen Sie dies:

 <div class="container" id="locations"> 
<div class="row"> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="2.jpg"> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="1.jpg"> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="2.jpg"> 
      </div> 
     </div> 
     </div> 
     <div class="locationName"> 
      City 
     </div> 
<div class="row"> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="2.jpg"> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="1.jpg"> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="2.jpg"> 
      </div> 
     </div> 
</div> 
</div>