How to display my logo vertically central in my header

Question

I am trying to display this logo in the header in a presentable fashion. I would like it displayed vertically central in the header but with a reasonable gap to the left of the text. The image is attached. Any help would be appreciated!

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
}

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}

<header>
     Melbourne Public Library Catalogue Site
     <img id="icon" src="Images/Icon.png" class="icon"/>
</header>

score 0 · Answer 1 · answered May 14 '18 at 11:44

0

The remaining space in height is 20%. Split that into two and use as vertical margin.

margin: 10% auto;

answered May 14 '18 at 11:44

Tomas

146
5

score 0 · Answer 2 · answered May 14 '18 at 11:44

vertical-align: middle; will help you out here :)

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
}

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
vertical-align: middle; /***Apply this***/
}

<header>
     Melbourne Public Library Catalogue Site
     <img id="icon" src="Images/Icon.png" class="icon"/>
</header>

score 0 · Answer 3 · answered May 14 '18 at 11:45

You can use flex for this.

header {
  display: flex;
  width: 100%;
  height: 80px;
  background-color: #76323f;
  font-size: 40px;
  color: whitesmoke;
  line-height: 80px;
  overflow: hidden;
  white-space: nowrap;
}

p {
  margin: 0;
}

.icon {
  margin: auto;
  width: 70px;
  height: 80%;
}

<header>
  <p>
    Melbourne Public Library Catalogue Site
  </p>
  <img id="icon" src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png" class="icon" />
</header>

score 0 · Answer 4 · answered May 14 '18 at 11:45

use display: flex; align-items: center; to the header
set margin-left to icon as per your requirement

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;

 }

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:20px;// change as per your requirement
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

<header>
    Melbourne Public Library Catalogue Site
    <img id="icon" src="http://via.placeholder.com/150x150" class="icon"/>
</header>

How to display my logo vertically central in my header

4 Answers4