css - 两个input垂直居中

问题描述

问 题

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呢?

解决方案

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

这篇关于css - 两个input垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！