casusbelli casusbelli - 5 months ago 35
CSS Question

line-height not working with ios chrome

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)

Safari Screnshot

With google chrome (Elements not align)

enter image description here

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

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>