Vertical align of image-CodePudding

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 >
  <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 >
  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>
</div>

I am just really starting HTML CSS. Any suggestions?

CodePudding user response：

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 >

  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>


</div>

CodePudding user response：

Simply add 'justify-content: center' to your flex container.

header {

    background-color: blue;
    height: 118px;
    width: 1024px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{

    margin-left:auto;
    margin-right:auto;
    width: 1024px;

}
img { display:block }

<div >

        <header>
            <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
        </header>


    </div>

CodePudding user response：

You have to add justify-content: center; to header.

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
}

I hope this will help you.