twitter-bootstrap - 我尝试使用 boostrap4 使文本居中对齐，但它不起作用？

Question

这是我的网站网址：http ://webdesignleren.com/ 。当您转到此页面下的主页时，您会在其下看到 4 个图像和文本。**onderhoud banden ** 等。它们都向左对齐，而我将文本对齐居中。我使用 bootstrap4，当我访问网站时：https ://getbootstrap.com/docs/4.0/utilities/text/ 我尝试执行相同的代码，但它不起作用。这是我的html代码：

<div class="row">
<div class=" col-sm-12 col-md-6 col-lg-3">
<div class="home-content3-image1 w-100"><img class="img-fluid" src="http://webdesignleren.com/wp-content/uploads/2020/10/toyota-296x185-1.jpg" alt="Responsive image">
<div class=" row ">
<div class="image1-tekst1">Onderhoud</div>
</div>
<div class="row">
<div class="image-button1">Lees Verder</div>
</div>
</div>
</div>

我怎样才能让onderhoud（文本）与bootsrap4对齐？你能给我一个上面mijn代码的例子吗？谢谢约翰

标签： twitter-bootstrap

Answer 1

试试下面的代码片段。实际上，您不需要row图像下的文本类，因为图像是fluid这样的，它占据了其容器/包装器的整个宽度。

然后，text-center像我一样在包装器上添加引导程序中的类。照原样，您的图像将居中，您的所有内容也将居中。如果您只希望您的标题居中，请将类添加text-center到image1-tekst1.

而且，这是我的建议：看看Bootstrap 卡片，因为我看到您正在尝试做与卡片已经做得很好的事情相同的事情；）

.home-content3-image1 {
    border: 2px solid hsl(0, 0%, 90%);
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 18rem;
    margin-top: 3rem;
}
.image1-tekst1 {
    font-family: 'Ravi Prakash', cursive;
    font-size: 28px;
    /* text-align: center; */
     margin-top: -1rem;
}
.image-button1 {
    /* padding-left: 4rem; */
    margin-top: -0.5rem;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" col-sm-12 col-md-6 col-lg-3">
  <div class="home-content3-image1 w-100 text-center">
    <img class="img-fluid" src="https://picsum.photos/200" alt="Responsive image">
    <p></p>
    <div class="image1-tekst1">Onderhoud</div>
    <div class="image-button1">Lees Verder</div>
  </div>
</div>