时间戳

首页 > 解决方案 > 无法让“对齐项目”在 flexbox 中工作

html - 无法让“对齐项目”在 flexbox 中工作

问题描述

我正在尝试使用弹性框对齐分配给它的网格单元中心的“导航 ul”，但“对齐项目”属性似乎不想工作。我也尝试过使用“justify-content”，但这也不起作用。我错过了什么？提前致谢。

CSS / HTML

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: white;
}

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas: "imgTitle main" "nav main" "sidebar main" "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

标签： htmlcss

解决方案

您可以通过两种方式使用flex和对齐。或在navjustify-content: centercenterdisplay gridnav

使用显示：flex

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: white;
}

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas: "imgTitle main" "nav main" "sidebar main" "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: flex;
  justify-content: center;
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}
<body>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

使用显示：网格

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: white;
}

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas:
    "imgTitle main"
    "nav main"
    "sidebar main"
    "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: grid;
  
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}
<body>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

推荐阅读