两个input垂直居中

Question

html结构

<div class='box'>
  <input type="text" id='general' name="1" placeholder='请输入' class='vAlign'/><span class='vAlign'>⇄</span><input type="text" id="camelCase" name="2" class='vAlign'/>
</div>

style样式

*{
  box-sizing:border-box;
}
.box{
  /*font-size:5px;*/
  position:relative;
  border:1px solid #ccc;
  height:30px;line-height:28px;
  background-color:#afa;
  border-radius:3px;
  overflow:hidden;
}
.box .vAlign{
  display:inline-block;
  vertical-align:middle;
  /*font-size:14px;*/
}
.box input{
  padding:0;
  border:none;  outline:none;
  width:50%;
  height:28px;
  padding-left:15px;
  padding-right:15px;
}
.box span{
  position:absolute;
  left:-webkit-calc(50% - 15px);
  width:28px;
  line-height:26px;
  border:1px solid #ddd;
  border-radius:5px;
  text-align:center;
}

.box不设置font-size的值无法垂直居中input呢?

Answer 1

一是你第一个input标签没闭合；
二是有空白占位符，设置font-size:0就没有了；
三是元素垂直对齐的问题，设置vertical-align: top;

Answer 2

这个可以叫代码换行被解析,在这个顶部盒子box上设置font-size：0可以直接让里面的文本内容消失,这样两个input就会在一行上显示了。如果不设置,文本内容也就是这个⇄会占位置的,默认情况下Chrome的中文是12px。
还有一点就是,你的代码里面这块：

   <input type="text" id='general' name="1" placeholder='请输入' class='vAlign'/

注意input没有闭合,稍微注意一点吧,虽然标准浏览器会给你补上的