line-height funktioniert nicht mit ios chrome

Question

Ich verwende line-height, um die Elemente auf meinem Handy header vertikal auszurichten.

Alles funktioniert super mit Chrome Desktop, Safari Mobile. Chrome richtet die Elemente in der header jedoch nicht vertikal aus.

Safari (Elemente auszurichten)

mit Google Chrom (Elemente auszurichten nicht)

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

Sie können die float:left in span entfernen und display:inline-block verwenden, weil jetzt können Sie vertical-align:middle dann verwenden Sie auch vertical-align:middle ist die img weil Voreingestellt können 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>