line-height not working with ios chrome

Question

I'm using line-height to vertically align the elements on my mobile header.

Everything is working great with chrome desktop, Safari mobile. However Chrome do not vertically align the elements in the header.

With safari (Elements align)

With google chrome (Elements not align)

HTML

<header class="header">

<div class="header-content">

<span class="left">
    <a class="button red">Menu</a>
</span>

<span class="center">
    <img src="logo.png">
</span>

<span class="right">
    <a class="button red">Login</a>
</span>


</div>

CSS

.button{
  font: normal 12px Verdana,Helvetica,Arial,sans-serif;
  margin: 0px;
  display: inline-block;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  color: #444;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  height: 33px;
  line-height: 33px;
  min-width: 25px;
  padding: 0 8px;
  text-decoration: none;
}
.header{
  font: normal 12px Verdana,Helvetica,Arial,sans-serif;
  max-width: 100%;
  height: 50px;
  line-height: 50px !important;
  background-color: #fff;
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  border-bottom: 1px solid #cbcbcb;
}
.header-content{
  max-width: 480px;
  margin: 0 auto;
  padding: 0px 10px;
}
.header-content span{
  float:left;
  width: 33%;
}
.header-content .left{
  text-align: left;
}
.header-content .center{
  text-align: center;
}
.header-content .right{
  text-align: right;
}
.header-content img{
  width: 140px;
}

Answer 1

You can remove the float:left in span and use display:inline-block because now you can use vertical-align:middle then you can also set vertical-align:middle the img because by default is baseline.

.button {
  font: normal 12px Verdana, Helvetica, Arial, sans-serif;
  margin: 0px;
  display: inline-block;
  background-color: #f5f5f5;
  background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  color: #444;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  height: 33px;
  line-height: 33px;
  min-width: 25px;
  padding: 0 8px;
  text-decoration: none;
  vertical-align: middle
}
.header {
  max-width: 100%;
  height: 50px;
  line-height: 50px !important;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #cbcbcb;
}
.header-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 0px 10px;
  font-size: 0 /* inline-block fix gap*/
}
.header-content span {
  display: inline-block; 
  width: calc(100% / 3); /* 33.3% */
  font: normal 12px Verdana, Helvetica, Arial, sans-serif;
}
.header-content .left {
  text-align: left;
}
.header-content .center {
  text-align: center;
}
.header-content .right {
  text-align: right;
}
.header-content img {
  width: 140px;
  vertical-align: middle;
}

<header class="header">
  <div class="header-content">
    <span class="left">
      <a class="button red">Menu</a>
     </span>
    <span class="center">
      <img src="//dummyimage.com/140x33&text=image">
    </span>
    <span class="right">
      <a class="button red">Login</a>
     </span>
  </div>
</header>