Image vertically aligned in div

Question

I'm trying to center this image vertically inside a div. As you can see I've accomplished that, however, it's still pushed slightly towards the bottom of the div. I can't find any reasons why this would be and I've even tried a different image.

HTML:

<div class="site-header">
            <img class="logo" src="CGLOGO.png" alt="logo">
</div>

My CSS:

html, body {
    margin: 0;
    background: #F7B267;
}
.site-header {
    background: #eee;
    color: #555;
    height: 3.125em;
    line-height: 3.125em;
    margin-bottom: 1rem;
}
.logo {
    max-height: 75%;
    vertical-align: middle;
  }

Result:

the orange line underneath indicates a margin-bottom, try removing that — Ramon de Vries, Jun 02 '20 at 13:23

score 0 · Accepted Answer · answered Jun 02 '20 at 13:29

You can center it with flexbox:

html, body {
    margin: 0;
    background: #F7B267;
}
.site-header {
    background: #eee;
    color: #555;
    height: 3.125em;
    line-height: 3.125em;
    display: flex;
}
.logo {
    display: block;
    max-height: 75%;
    margin: auto 0;
}

score 0 · Answer 2 · answered Jun 02 '20 at 13:33

there are several ways to vertically center on a div one of it is

<div class="site-header">
   <img class="logo" src="CGLOGO.png" alt="logo">
</div>

<style>
.site-header {
   position:relative;
   height:400px;
   width:100%;
}
.site-header img {
   position:absolute;
   top:50%;
   height: 100px;
   transform:translateY(-50%);
}
</style>

score 0 · Answer 3 · answered Jun 02 '20 at 13:37

Just replace your .site-header class with the following

.site-header {
    background: #eee;
    color: #555;
    height: 3.125em;
    line-height: 3.125em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center; /* For vertical alignment*/
    // justify-content: center; /* For horizontal alignment*/
}

Image vertically aligned in div

3 Answers3