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
you could try using padding in your css.
This way you can adjust how high/low your text ist supposed to be.
Hope I could help!
Philipp
Your
.center-align
div is only as tall as its contents. If you set its parent todisplay:flex
, the.center-align
div would then fill the height of theheader
and you’d see your elements vertically aligned. Or you could just set the height instead on the.center-align
div.