Div与文本将不会居中

Question

我正在创建一个简单的图片库。在图片上方，我指出拍摄照片的地方，但第二行和每隔一行都有问题 - 带名称的div被推向右侧而不是居中。下面是它的外观：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>

明显的代码是 “行” 的div内翻了一番。

Answer 1

添加一个完整的12列格来locationName类，以便它占据了整个行，​​并迫使其他列之间休息。正如你目前所拥有的，它正试图放在内联中，这是在最长的图像之后。

<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

您可以使用中心标记这样

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

Answer 3

貌似有一个与你使用的是引导冲突。尝试使用class行在div之前移动标题（City）。

<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

我看到了您的问题。实际上与盒子高度有冲突。为了快速解决这个问题，你可以增加你的拇指高度。或者你可以看到下面的示例代码。

<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

把下面的代码从row中拿出来，那应该是你想要的方式。

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

您都面临这个问题，因为你可以在图像（链接）看你 提供的中间图像移动略有下降，因此 它会影响下一行的标题每次。

Answer 6

试试这个：

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