Div with text wont stay centered - html

Question

I'm creating a simple image gallery. Above the images I name the place where the pictures were taken, but the second and every another row has issues - div with the name is being pushed to the right instead of staying centered. Here is how it looks: 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>
Obviously the code is doubled inside the "row" div.

Answer 1

Bring this below code out of row and that should go the way you want.
<div class="locationName">
City
</div>
You are facing this problem because you can see in the image(link) you
provided that the middle image has moved slightly down and hence
it affects the title of the next row everytime.

Answer 2

i saw your issue. actually there is a conflict with the boxes height. to quickly fix this you can increase your thumbs height equal. or you can see the example code below.
<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 3

Add a full 12 column grid to the locationName class so that it takes up the whole row and force a break between the other columns. As you currently have it, it is trying to be placed inline, which is after the longest image.
<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 4

Looks like there is a conflict with the bootstrap you are using. Try moving the title (City) before the div with class row.
<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 5

try this:
<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>

Answer 6

You can use center tag like this
<div class="row" id="locations">
<center>
....
</center>
</div>