CODEWITHSUNDEEP
cssflexbox
Knows Not Much
Knows Not Much

Reputation: 31526

Not able to vertically align items in flexbox

I am learning to use flexbox and I am not able to align content vertically inside of the class .headercontent. it seems to honor everything else like justify-content but ignores align-content. I searched and found this thread and this seems to suggest that the parent should have height explicitly set. I have set height by setting flex-basis and flex-grow and a min-height. But still by div containing the h1 is stuck to the top of the header. I want that green div to be in the vertical center of the header. what am I doing wrong?

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>

Here is the codeine link to my work https://codepen.io/knows_not_much/pen/rNxXoOM

Upvotes: 0

Views: 79

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

I want that green div to be in the vertical center of the header. what am I doing wrong?

Your header element is taking up 10% height of body. Your .headercontent does not take up the entire defined height of the header. Therefore, it is going to sit at the top. To address this, you can assign the header element to be a flex container and that is where you assign align-items: center; justify-content: center properties

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

Assign width: 100% to the .headercontent afterwards (as needed) if you must have the green background take up the space

Upvotes: 1

Related Questions