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

Html – How do I vertically align this image inside the header?

As you can see in the image, i have a logo inside the header (the blue part is the header), and i can’t align it to be vertically at the center. I’ve put a border to the image just to see its size.My page

Basically all the CSS code behind the logo and header is this:

header{
    margin-bottom: 10px;
    background: blue;
}

#logo{
    margin-left: 10px;
    border: 3px solid black;
}

What can I do? Thanks.

Tags:

3

Answers


  1. 0

    The easiest way to do this is using display flex:

    header{
    margin-bottom: 10px;
    background: blue;
    display: flex;
    align-items: center;
}

    if you need help you can call me in the comments

    Login or Signup to reply.
  2. 0

    It may work in your case :

    #logo {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

    as guys guys said , another way is using flexbox and and setting center value to align-items property. (add it in your header)

    Or use align-self propery in your logo.

    Login or Signup to reply.
  3. 0 
    <header>
  <div class="logo-container">
    <img src="logo.png" alt="Logo">
  </div>
</header>

<style>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px; /* set the height of the header */
}

.logo-container {
  display: flex;
  align-items: center;
}
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search