如何将一个div垂直居中，而不是另一个div？

时间：2020-10-28 01:43:28

标签： html css bootstrap-4

我有一个有2个孩子div的div。因此，在此示例中，我如何将.tagline-container而不是nav垂直居中？

<div class="header">
    <nav class="navbar">
      <h1>Rainey 13 Foundation</h1>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
</div>

这是我的CSS 

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  align-items: center;
  justify-content: center;
}

这目前不会使任何内容居中

我的完整代码

@font-face {
  font-family: NATS;
  src: url(./fonts/NATS-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  font-family: NATS;
}

.header {
  display: inline-block;
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="header">
    <nav class="navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

3 个答案:

答案 0 :(得分：1)

您可以在align-self上使用.tagline-container。 “自我对齐”会在您的伸缩方向（在这种情况下为垂直方向，因为row是默认方向）的横轴上调整该元素：

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  align-self: center;
}
<div class="header">
  <nav class="navbar">
    <h1>Rainey 13 Foundation</h1>
    <ul class="nav-items">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">Contact</a>
        <a href="#" class="nav-link">Donate</a>
      </li>
    </ul>
  </nav>
  <div class="tagline-container">
    <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
  </div>
</div>

引导程序版本

您可以将align-self添加到导航中。

@font-face {
  font-family: NATS;
  src: url(./fonts/NATS-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  font-family: NATS;
}

.header {
  display: inline-block;
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

nav {
  align-self: flex-start;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="header">
    <nav class="navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

答案 1 :(得分：0)

需要将.tagline-container设置为flex的布局，以实现justify-content和align-items。

基于flex布局，它将按预期工作。

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
  <div class="header">
    <nav class="main-navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

答案 2 :(得分：0)

您可以在margin: auto内使用tagline-container 

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  margin: auto;
}
<div class="header">
    <nav class="navbar">
      <h1>Rainey 13 Foundation</h1>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
</div>

相关问题
最新问题