對齊內部div中的內容並更改背景顏色

Question

第一次引導用戶在這裏，我正在幫助一些更有經驗的用戶可以回答我有幾個問題。

參考網站：http://ps11.pstcc.edu/~c2230a11/lab4/jraudi

首先，我已經建立在我的導航欄和轉盤位於一個巨大的容器。在我的carousal下，我創建了一個4 x 4 x 4行的額外容器，等於所需的12.我將這些行中的圖片居中，不幸的是，當我輸入文本時，我無法在圖片邊界內對齊文本。我嘗試過使用，但這並不如我想要的那樣好。所以，我想我會問他們是否是一種替代方法。

<div class="row"> 
    <div class="col-lg-4"> 
     <img class="center-block" src="images/newveh.png" alt="Generic placeholder image" width="280" height="175"> 
     <h3><b>New Vehicles</b></h3> 
     <p>Jr Audi has the latest Audi models available.</p> 
     <p><a class="btn btn-default" href="#" role="button">&raquo; View New Inventory</a></p> 
    </div><!-- /.col-lg-4 --> 
    <div class="col-lg-4"> 
     <img class="center-block" src="images/certpreowned.png" alt="Generic placeholder image" width="280" height="175"> 
     <h3><b>Certified Pre-Owned Vehicles</b></h3> 
     <p>Audi Certified Pre-Owned inspection is the industry's most rigorous.</p> 
     <p><a class="btn btn-default" href="#" role="button">&raquo; View Certified pre-owned Vehicles</a> 
    &raquo;</p> 
    </div><!-- /.col-lg-4 --> 
    <div class="col-lg-4"> 
     <img class="center-block" src="images/specialoffers.png" alt="Generic placeholder image" width="280" height="175"> 
     <h3><b>Special Offers</h3></b> 
     <p>If you are considering a new Audi vehicle, now is the perfect opportunity.</p> 
     <p><a class="btn btn-default" href="#" role="button">&raquo; View Incentives</a></p> 
    </div><!-- /.col-lg-4 --> 
    </div><!-- /.row --> 

另外，關於使用背景顏色。我想改變我的主容器外的背景色，所以一切都在最左或最右邊。我試圖改變背景顏色，並設法改變一切。如何僅更改主容器外部的背景顏色？

謝謝

Answer 1

2零件到這樣一個問題：

1）改變背景顏色，你將需要設置「背景色」的車身，以及設置一個白色（或任何所需的顏色）在容器格。 div默認是透明的，所以當你更新顏色時，它通過透明div可見。

2）對齊文本應該像使用CSS「text-align：center」一樣簡單，以便將文本與每列的中心對齊。爲了將其限制在圖像的寬度相同，我會建議，象這樣在列的div設置CSS「填充」玩弄（原諒聯樣式）：

<div class="row"> 
<div class="col-lg-4" style="padding: 0px 50px"> 
    <img class="center-block" src="images/newveh.png" alt="Generic placeholder image" width="280" height="175"> 
    <h3 style="text-align: centre"><b>New Vehicles</b></h3> 
    <p style="text-align: centre">Jr Audi has the latest Audi models available.</p> 
    <p><a class="btn btn-default" href="#" role="button">&raquo; View New Inventory</a></p> 
</div><!-- /.col-lg-4 -->