獲取內容對齊中心

即時通訊設法建立一個配置文件卡視圖和即時通訊使用bootstrap它。獲取內容對齊中心

我用class col-lg-3構建了兩個div元素，另一個用col-lg-9構建。問題是col-lg-9內部的內容未在中心對齊。它在左側擁有更多的空間，並且我嘗試了幾乎所有讓他們爲中心的東西。禁用保證金和填充無效。

col-lg-9位於一行和一個普通容器內。內容是col-lg-9。我在這裏有一個bootplay的樣本，如果你把容器銷售出去，你可以看到帶有類卡的內容有更多的空間。

這就是它的HTML代碼

  <div class="col-lg-9" style="min-height: 100px; background-color: #333"> 
      <div class="container"> 
       <div class="card"> 
        <div class="model-image"> 
         <img src="img/elliot.jpg"> 
        </div> 
        <div class="card-content"> 
         <a class="card-header">Team Fu</a> 
        <div class="meta"> 
         <span class="date">Create in Sep 2014</span> 
        </div> 
       </div> 
        <div class="card-footer"> 
         <a href="#">ds</a> 
        </div> 
       </div> 
      </div> 
     </div>

我uploadet使雅可以看到整個網站。爲了更好的理解demo

來源

2016-04-21 p_e_88

，如果你添加一個額外的容器都.card div的你會得到它爲中心：

<div class="container text-center"> 
<div class="cards-container" style="display:inline-block; box-sizing:border-box;"> 

    <!-- here all your .card divs --> 

    </div> 
</div>

您可以在CSS文件中添加卡容器的CSS。

來源

2016-04-21 20:51:51 Raf

Didnt工作。仍然就像在照片或bootply –

我只是在bootply上測試它，並正常工作 - 通過將其添加到您的代碼 – Raf

好吧。你需要添加文本中心類到.container – Raf

使用引導程序時，只需將文本中心類添加到您的div中，它將使元素和所有子元素居中。

而且我會建議使用內聯css而不是把你的CSS放在外部樣式表中。未來維護將會容易得多。

來源

2016-04-21 20:57:06 Ebelanger

<div class="card-content text-center"> 
    <a class="card-header">Team Fu</a> 
    <div class="meta"> 
    <span class="date">Create in Sep 2014</span> 
</div>

來源

2016-04-21 20:58:51 mihkov

獲取內容對齊中心

回答

相關問題