Div与文本将不会居中

问题描述：

我正在创建一个简单的图片库。在图片上方，我指出拍摄照片的地方，但第二行和每隔一行都有问题 - 带名称的div被推向右侧而不是居中。下面是它的外观：http://prntscr.com/fg10u4 Div与文本将不会居中

@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内翻了一番。

的问题并不在你提供的代码显示出来。尝试提供一个真实的[mcve] – Quentin

答

添加一个完整的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>

Verefied。我用这个问题。 “col”有边距和填充，这就是你没有“完全”居中的标题的原因。 –

那么，最简单的解决方案，我拒绝甚至尝试（即时通讯那愚蠢）的工作。谢谢你节省了我很多时间。 – BigPaws

不用担心，很高兴我可以帮忙！它的所有关于试验，花时间:) – Aotik

答

您可以使用中心标记这样

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

'元素在1998年被弃用。本世纪没有理由使用它。 – Quentin

答

貌似有一个与你使用的是引导冲突。尝试使用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>

答

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

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

答

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

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

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

答

试试这个：

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

Div与文本将不会居中

相关推荐