html - 在屏幕中心居中导航栏标题

Question

我试图将导航栏的标题放在屏幕中间。有没有办法在没有自定义边距/填充值的情况下做到这一点（试图保持响应）？在下图中，我想在屏幕中间居中显示“标题文本在此处”。

<header>
  <nav class="nav">
    <img class="nav-logo" src="./jumbotron.jpg" alt="logo">
    <h1 class="nav-title">Title text goes here</h1>
    <ul class="nav-links">
      <li class="nav-link"><a href="https://www.google.com">nav link 1</a></li>
      <li class="nav-link"><a href="https://www.google.com">nav link 2</a></li>
      <li class="nav-link"><a href="https://www.google.com">nav link 3</a></li>
    </ul>
  </nav>
</header>

/*****************************************************************************/
/* Navbar */
/*****************************************************************************/
.nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: white;
}

.nav-logo {
    width: 10%;
}

.nav-title {
    flex: 1;
    margin: auto 0;
    text-align: center;
    font-size: 30px;
}

.nav-links {
    flex: 0.5;
    display: flex;
    width: 100%;
    padding: 20px;
    justify-content: flex-end;
    list-style: none;
}

标签： htmlcssflexbox

Answer 1

您可以使用 flexbox 来实现这一点。通过在标题和标题上设置align-items为，标题将扩展以覆盖徽标和链接未占用的任何空间。然后，将您的标题文本居中：stretchflex-grow1text-align:center

.nav {
  display: flex;
  flex-direction: row;
  align-items: stretch
  background-color: white;
}

.nav-logo {
  width: 10%;
}

.nav-title {
  flex-grow: 1;
  margin: auto 0;
  text-align: center;
  font-size: 30px;
  text-align: center;
}

.nav-links {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: flex-end;
  list-style: none;
}