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）更改背景颜色，您需要设置＆＃34;背景颜色＆＃34;在Body上，以及在容器div上设置白色（或任何所需的颜色）。默认情况下div是透明的，因此当您更新颜色时，透明div可以看到它。

2）对齐文本应该像使用CSS＆＃34; text-align：center＆＃34;一样简单。将文本与每列的中心对齐。为了将它限制在相同的图像宽度，我建议玩一下CSS＆＃34; padding＆＃34;在列div上像这样（借用内联样式）：

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

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

1 个答案: