(bootstrap) 如何将 h1 垂直对齐到中间

Question

<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Secion One-->
    <section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
        <div class="container">
            <div class="row align-items-center text-center">
                <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
            </div>
        </div>
    </section>
</body>

Here is what it looks like right now !( https://media.discordapp.net/attachments/855988935149486120/896932433319059487/unknown.png?width=609&height=406 )这是它现在的样子！（ https://media.discordapp.net/attachments/855988935149486120/896932433319059487/unknown.png?width=609&height=406 ）

Answer 1

Use flex:使用弹性：

<body class="h-100 d-flex flex-column">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
    <div class="container">
      <div class="navbar-brand mx-auto">
        <h2 style="color: white">Name</h2>
      </div>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#burger">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="burger">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a href="#python" class="nav-link px-3">
              <h2 style="color: white">Python</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link px-3">
              <h2 style="color: white">Name</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#html&css" class="nav-link px-3">
              <h2 style="color: white">Html&Css</h2>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!--Secion One-->
  <section
    class="
      d-flex
      align-items-center
      flex-1
      justify-items-center
      bg-dark
      text-light
      p-5 p-lg-0
      text-center text-md-start
    ">
    <div class="container">
      <div class="row align-items-center text-center">
        <h1 class="hi">
          Design made by the <span style="color: #f23dff">youth</span>
        </h1>
      </div>
    </div>
  </section>
</body>

the only thing you should also note is that the wrapping html might not be taking the full height, so add the following css:您还应该注意的唯一一件事是包装 html 可能没有占据全高，因此添加以下 css：

html{
  height:100%
}
.flex-1{
  flex: 1;
}

(bootstrap) 如何将 h1 垂直对齐到中间

问题描述

1 个解决方案

解决方案1
0 2021-10-11 02:01:53

(bootstrap) 如何将 h1 垂直对齐到中间

问题描述

1 个解决方案

解决方案1 0 2021-10-11 02:01:53

解决方案1
0 2021-10-11 02:01:53