Question

我想在 bootstrap 4 中垂直居中内容

<div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-6 align-middle">
                        <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
                        <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw
                            verhuizing.</p>
                    </div>
                    <div class="col-5 align-middle">
                        <div class="input-group">
                            <div class="form-outline">
                                <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
                            </div>
                            <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我想垂直居中此内容

Answer 1

你可以用 .align-items-center 试试这个。

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<div class="container">
    <div class="content">
        <div class="row align-items-center">
            <div class="col-6">
                <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
                <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.
                </p>
            </div>
            <div class="col-5 align-middle">
                <div class="input-group">
                    <div class="form-outline">
                        <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
                    </div>
                    <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以使用 flex 类使 align-center 像 d-flex align-items-center 一样，或者您可以在官方引导程序网站上查看完整文档：- https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 3

我不太确定单独使用 Bootstrap，因为这取决于您的容器高度。在您的情况下，它将等于您的内容。
因此，为了垂直对齐其内容，您需要将其容器高度设置为其视图的 100%。例如，高度：100vh。
然后，在您可以在该容器上使用引导程序提供的 flexbox 类之后
1. d-flex -> 设置显示弹性。
1. align-items-center -> 设置垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex align-items-center" style="height:100vh;">
  <div class="content">
    <div class="row">
      <div class="col-6 align-middle">
        <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
        <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.
        </p>
      </div>
      <div class="col-5 align-middle">
        <div class="input-group">
          <div class="form-outline">
            <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
          </div>
          <button type="button" class="btn btn-primary">
                                Ontvang offertes
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

如何在引导程序 4 中垂直居中内容

3 个答案: