Question 266846 in Html Question posted in
Some basic documentation can be found here.

Html – Issue with aligning elements: why doesn't align-items:center work

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>
Tags:

2

Answers


  1. 0

    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. 0

    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