skip to Main Content

Why doesn’t align-items:center work?
If I use padding: 40px 0; it works. but how do I get the result. that the height would be centered?
in my case, it’s just pressed to the top.

.header { 
  width: 100%;
  height: 72px;
  position: sticky;
  z-index: 100;
  top: 0;
  background-color: black;
}
.container {
 max-width: 1280px;
 margin: 0 auto;
}
.center-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


a, span {
color: white;
}
<section class="header">
    <div class="container">
      <div class="center-align">
        <div class="header-logo"><a href="#!">logo</a></div>
        <div class="header-mmm"><span>test</span></div>
        <div class="header-buttons">
        <button>test</button>
        </div>
      </div>
    </div>
  </section>

2

Answers


  1. you could try using padding in your css.

    <!DOCTYPE html>
    <html>
    <style>
    .center {
      padding: 70px 0;
      border: 3px solid green;
      text-align: center;
    }
    </style>
    
    <body>
    <div class="center">
      <p>I am vertically and horizontally centered.</p>
    </div>
    
    </body>
    </html>

    This way you can adjust how high/low your text ist supposed to be.
    Hope I could help!

    Philipp

    Login or Signup to reply.
  2. Your .center-align div is only as tall as its contents. If you set its parent to display:flex, the .center-align div would then fill the height of the header and you’d see your elements vertically aligned. Or you could just set the height instead on the .center-align div.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search