CODEWITHSUNDEEP
htmlcssalignment
Fabio Gomes
Fabio Gomes

Reputation: 51

Vertical align of image

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?

Upvotes: 0

Views: 43

Answers (3)

Challenge Win
Challenge Win

Reputation: 114

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.

Upvotes: 0

Dexter0015
Dexter0015

Reputation: 1039

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 class="container">

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


    </div>

Upvotes: 0

law_81
law_81

Reputation: 2420

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>

Upvotes: 1

Related Questions