I am trying to vertical align a image on my header. That is my actual code, I have it horizontall aligned into center.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>I tried search for a solution and could get it vertical aligned on center but then cant get it horizontal anymore with text-align:
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>I am just really starting HTML+CSS. Any suggestions?
>Solution :
Using Flexbox, you can add to your flex element the property justify-content:center
In this css-tricks article you can find a good examples about how to center elements.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>