行高不适用于 ios chrome答案

【问题标题】：line-height not working with ios chrome行高不适用于 ios chrome
【发布时间】：2016-06-24 12:48:49
【问题描述】：

我正在使用line-height 垂直对齐我的手机header 上的元素。

在 chrome 桌面、Safari 移动版上一切正常。但是 Chrome 不会垂直对齐 header 中的元素。

使用 safari（元素对齐）

使用谷歌浏览器（元素不对齐）

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;
}

【问题讨论】：

标签： html css google-chrome mobile responsive-design

【解决方案1】：

您可以删除span 中的float:left 并使用display:inline-block，因为现在您可以使用vertical-align:middle，然后您还可以将vertical-align:middle 设置为img，因为默认情况下是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>

【讨论】：