html - 对齐 div 内的内容并更改背景颜色

Question

第一次 Bootstrap 用户在这里，我正在帮助一些更有经验的用户回答我的几个问题。

引用站点:http://ps11.pstcc.edu/~c2230a11/lab4/jraudi

首先，我创建了一个巨大的容器，用于放置我的导航栏和轮播。在我的狂欢中，我在 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) 更改背景颜色，您需要在 Body 上设置“background-color”，并在容器 div 上设置白色(或任何所需的颜色)。默认情况下，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 -->