Не удается заставить «выровнять элементы» во флексбоксе - PullRequest
Новая
       9

Не удается заставить «выровнять элементы» во флексбоксе

2 голосов
/ 03 августа 2020

Я пытаюсь выровнять «nav ul» по центру ячейки сетки, которой он назначен с помощью гибкого блока, но свойство «align-items», похоже, не работает. Я также пробовал использовать 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>

Ответы [ 2 ]

2 голосов
/ 03 августа 2020

Вы можете сделать это двумя способами: используйте flex на nav и justify-content: center для выравнивания center. или display grid на nav

Использование дисплея: 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>
0 голосов
/ 03 августа 2020

Если вы примените свойство flex к навигации, а также примените свойство justify content к селектору css nav; он должен работать, см. ниже: 

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: flex;
  justify-content: center;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...