Невозможно вертикально выровнять элементы в flexbox - PullRequest
Новая
       13

Невозможно вертикально выровнять элементы в flexbox

0 голосов
/ 02 августа 2020

Я учусь использовать flexbox и не могу выравнивать содержимое по вертикали внутри класса .headercontent. кажется, что все остальное, например justify-content, учитывается, но align-content игнорируется. Я искал и нашел этот поток, и это, кажется, предполагает, что у родителя должна быть явно установлена ​​высота. Я установил высоту, установив flex-basis, flex-grow и min-height. Но все же div, содержащий h1, прилипает к вершине header. Я хочу, чтобы этот зеленый div находился по вертикали в центре header. что я делаю не так? 

html {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-size: 100%;
            line-height: 1.2em;
          }
          body {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            height: 100vh;
            background-color: #cdc9c1;
          }
          header {
            background-color: #a99879;
            flex-basis: 10%;
            flex-grow: 1;
            min-height: 20px;
          }
          main {
            background-color: #5b431a;
            flex-basis: 80%;
            flex-grow: 8;
          }
          footer {
            background-color: #77613c;
            flex-basis: 10%;
            flex-grow: 1;
          }
          .headercontent {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: green;
            min-height: 20px;
          }
          .navstyle {
            list-style-type: none;
          }
<html>
      <head>
      </head>
      <body>
        <header>
          <div class="headercontent">
            <h1>This is the header</h1>
        </div>
        </header>
        <nav>
          <ul>
            <li>section1</li>
            <li>section2</li>
            <li>section3</li>
          </ul>
        </nav>
        <main>
          <p> this is the main body</p>
        </main>
        <footer>
          <p> this is the footer </p>
        </footer>
      </body>
    </html>

Вот кодеиновая ссылка на мою работу https://codepen.io/knows_not_much/pen/rNxXoOM

1 Ответ

1 голос
/ 02 августа 2020

Я хочу, чтобы этот зеленый div был в центре заголовка по вертикали. что я делаю не так?

Ваш элемент header занимает 10% высоты от body. Ваш .headercontent не занимает всю заданную высоту header. Следовательно, он будет сидеть наверху. Чтобы решить эту проблему, вы можете назначить элемент header гибким контейнером, и именно здесь вы назначаете align-items: center; justify-content: center свойства 

header {
    background-color: #a99879;
    flex-basis: 10%;
    flex-grow: 1;
    display: flex; /* add these */
    align-items: center; /* add these */
    justify-content: center; /* add these */
}

Затем width: 100% присваиваете .headercontent (при необходимости) если вам нужно, чтобы зеленый фон занимал место

...