Div與文本將不會居中

-1

我正在創建一個簡單的圖片庫。在圖片上方，我指出拍攝照片的地方，但第二行和每隔一行都有問題 - 帶名稱的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內翻了一番。

來源

2017-06-05 BigPaws

的問題並不在你提供的代碼顯示出來。嘗試提供一個真實的[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>

來源

2017-06-05 07:48:45 Aotik

Verefied。我用這個問題。「col」有邊距和填充，這就是你沒有「完全」居中的標題的原因。 –

那麼，最簡單的解決方案，我拒絕甚至嘗試（即時通訊那愚蠢）的工作。謝謝你節省了我很多時間。 – BigPaws

不用擔心，很高興我可以幫忙！它的所有關於試驗，花時間:) – Aotik

-3

您可以使用中心標記這樣

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

來源

2017-06-05 07:36:21

'元素在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>

來源

2017-06-05 07:41:52 Necvetanov

我看到了您的問題。實際上與盒子高度有衝突。爲了快速解決這個問題，你可以增加你的拇指高度。或者你可以看到下面的示例代碼。

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

來源

2017-06-05 07:56:33 syedz

把下面的代碼從row中拿出來，那應該是你想要的方式。

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

您都面臨這個問題，因爲你可以在圖像（鏈接）看你提供的中間圖像移動略有下降，因此它會影響下一行的標題每次。

來源

2017-06-05 07:57:20

試試這個：

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

來源

2017-06-05 08:07:17

Div與文本將不會居中

回答

相關問題