对齐内部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 -->