Can't vertically center my logo - css

Question

On my page the top left logo isn't centered. Here's my code:
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
}
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
}
Yet according to articles I've read this technique should work. Why not in this case? I don't want to use absolute positioning because the green area around the logo descreases in size in smaller resolutions and logo must do so too.

Answer 1

Here is one way of doing it.
Apply display: table-cell to the a element wrapping your image and inherit the width and height from the .header-col1 ancestor block.
You can then use vertical-align: middle and text-align: center to get the alignment that you want. Add some left-right padding if you need some white space at the left and right edges.
Finally, to get the image to act responsively, set width: 100% and use vertical-align: top to take care of the white-space-below-the-baseline issue.
.header_col1, .header_col2 {
height: 110px;
}
.header_col1 {
float: left;
width: 20%;
background: #009240 none repeat scroll 0% 0%;
text-align: center;
position: relative;
}
.header_col1 a {
vertical-align: middle;
display: table-cell;
text-align: center;
width: inherit;
height: inherit;
padding: 0 10px; /* optional if you need left/right whitespace */
}
.header_col1 a img {
width: 100%;
vertical-align: top;
}
<div class="header_col1">
<a id="logo" href="#">
<img src="http://placehold.it/262x78">
</a>
</div>

Answer 2

Use the display table magic trick :-)
.header_col1 {
display:table;
}
.header_col1 a { /* my logo */
display: table-cell;
vertical-align: middle;
}

Answer 3

I would center it with transforms.
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
position: relative;
padding: .5em;
top: 50%;
transform: translateY(-50%);
}
EDIT: Added padding: .5em; to give the logo some breathing room on smaller screens, when the container starts to shrink.

Answer 4

The new hotness would be this;
.header_col1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.header_col1 a { /* my logo */
margin: auto;
}
Note: as time goes by, the vendor prefixes -webkit- -moz- ms- will be not nessacery.
here is a sample: https://jsfiddle.net/w4m50ybd/1/
Bonus: making the image resize to the container is a different question.. however the answer to that is width: 100%; height: auto; in the most simple case.

Answer 5

Try this
.header_col1:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.header_col1 a {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
Codepen Demo

Answer 6

You need to set a line-height equal to the height for the .header_col1 for this technique to work:
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
line-height: 110px;
}
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
}
...and the img needs to be a block-element:
.header_col1 a img {
display: block;
}
Edit:
Add this to retain the flexible sizing:
.header_col1 a {
width: 100%;
}
.header_col1 a img {
max-width: 100%;
}

Answer 7

I have added line-height to the anchor tag.
header_col1 a {
display: inline-block;
vertical-align: middle;
line-height: 10;
}

Answer 8

you can use the table display to align a tag vertically and horizontally. This way is the easiest way to align an element. I did test on your page, it worked perfectly.
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
display: table;
}
.header_col1 a { /* my logo */
display: table-cell;
text-align: center
vertical-align: middle;
}
or another way is to use padding to center your element.
.header_col1 a {
padding: 16px 0px;
}
To avoid other headache while changing the size of your navigation in other devices and screen resolution, I recommend the first solution.