表单小技巧

09-01-2016

最近项目中遇到一个表单的小需求，将label和input并排放置，然后使得这两个框相对于外框垂直居中，需要兼容ie8。本文提出一种解决这个问题的方案。

刚看到这个需求时，觉得是个很容易的需求，但是实际写的时候发现还是有一些小坑，这里记录一下，提出一个方案。

需求描述

将label和input并排放置，然后使得这两个框相对于外框垂直居中，需要兼容ie8。同时label可能出现两行的情况，要保证label两行时也能保证居中。

大意如下图所示(粉色为外框，内部左侧灰色框为label，右侧为input框)：

在这个方案中，由于要兼容ie8，所以垂直居中的利器flex无法使用。因而这里采用将label和input都以inline-block的形式进行控制。

遇到问题

刚开始写时，考虑这就是一个两个子元素垂直居中的问题，因而就想采用“内部元素设置inline-block，外部元素设置vertical-align: middle;”的方式。

主要代码如下：

PS：这边有另外一点需要主要，内部两个元素设置inline-block时，两个元素之间会出现一些小缝隙，这是由于元素标签间空格导致的，这里通过外层设置font-size:0来解决。对于这个问题的出现原因和应对方案，张鑫旭的文章介绍得很详细，可以参看去除inline-block元素间间距的N种方法。

html：

<div class="item">
	<label for="name1">我是姓名长长长</label>
	<div class="inputBox">
		<input id="name1" placeholder="需要字符和数字组合">
	</div>
</div>

css(核心代码)：

.item {
	display: inline-block;
	font-size: 0px;
	vertical-align: middle;
}

.item label {
	display: inline-block;
	line-height:16px;;
	font-size: 10px;
}

.item .inputBox {
  display: inline-block;
  font-size: 18px;
}

全部代码demo：

codepen代码演示点击这里

会发现显示会有异常(如下图)：

也就是label当达到多行时，其实没有达到居中的效果。label框有一定程度的偏移。

分析及解决

其实这个问题是由于外层为了解决inline-block元素间的间距问题，使用了font-size:0，而导致内部两个inline-block之间和外层整体基线对齐出现偏差。

这个问题其实是基线对齐导致的，基线问题张鑫旭也有文章详细解释，可以参看深入理解vertical-align和line-height的基友关系

修正后css(核心代码)：

.item {
	display: inline-block;
	font-size: 16px; // 第一：将外层字体大小设置为和label的line-height一致。
}

.item label {
	display: inline-block;
	line-height:16px;;
	font-size: 10px;
	vertical-align: middle; // 第二：label添加vertical-align: middle;
}

.item .inputBox {
  display: inline-block;
  font-size: 18px;
  margin-left: -8px; // 第三：采用负margin解决inline-block元素间有间隔的问题
}

修正后全部代码demo：

codepen代码演示点击这里

会发现此时左侧显示居中效果了，实现了需求。

备注

1、主要解决的方案是前面提到的三点修正案。

2、现在常见的表单中，由于一般label都不会有多行的情况，所以日常解决方案可能就是label设置高度和外层一样，然后设置label的行高和高度一样实现文字居中。这其实是一种“伪居中”，虽然可以实现需求但是局限性就是只能满足单行的条件。如果遇到可能有多行的问题，还是需要采用本文提出的解决方案。