使用Bootstrap垂直居中div

问题描述 投票：0回答：1

我目前正在使用模板，并且尝试按照以下要求定位元素：

  • 标题必须粘在顶部，水平居中，H3 和一组 
    <nav>
    链接之间留有间距。
  • <main>
    必须水平和垂直居中，文本右对齐。

我已经这样做了 3 个小时，但仍然没有成功。这是模板：

  <div>
    <header className='fixed-top d-flex justify-content-around'>
      <div className="">
        <h3 className="float-md-start mb-0">Ethan Leyden</h3>
        <nav className="nav nav-masthead justify-content-center float-md-end">
          <a className="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
          <a className="nav-link fw-bold py-1 px-0" href="#">Features</a>
          <a className="nav-link fw-bold py-1 px-0" href="#">Contact</a>
        </nav>
      </div>
    </header>

    <div className="mx-auto my-auto">
      <main className="">
        <h1>Welcome to the site</h1>
        <p className="lead">It's definitely still under construction. Do you know how to vertically center content with Bootstrap? I sure don't</p>
        <p className="lead">
          <a href="#" className="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
        </p>
      </main>
    </div>
  </div>

我尝试了

mx-auto
、
my-auto
、
align-items-center
、
d-flex
的各种组合，但没有效果。我确信这是一个微不足道的问题，但我无法在任何地方找到我的具体问题的答案（或至少找到一个有效的答案）。

html css bootstrap-5 centering
1个回答
1
投票

您可以使用 d-flex 作为第一个点，使用 flex-grow-1 来表示必须水平和垂直居中。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="flex flex-column vh-100">
    <header class='fixed-top d-flex justify-content-around'>
        <div class="d-flex align-items-center gap-5 justify-content-center">
            <h3 class="float-md-start mb-0">Ethan Leyden</h3>
            <nav class="nav nav-masthead justify-content-center float-md-end">
                <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
            </nav>
        </div>
    </header>
<div class="mx-auto flex-grow-1 d-flex justify-content-center align-items-center h-100 mt-5">
    <main class="">
        <h1>Welcome to the site</h1>
        <p class="lead">It's definitely still under construction. Do you know how to vertically center
            content with Bootstrap? I sure don't</p>
        <p class="lead">
            <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
        </p>
    </main>
</div>
    <div class="mx-auto my-auto">
     
    </div></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.