让多个行内元素居中的两种方法
2018-11-23 本文已影响28人
胡儒清
前言
当多个行内元素比如img、input、span等一起混合放在一起的时候，我们发现，想让他们居中，还真是个头疼的事，这里介绍几种常用的方法，先来看一段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<span>xxxx</span>
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<input type="" name="" id="" value="" />
</div>
</body>
</html>
<style type="text/css">
.box {
height: 128px;
border: 1px solid;
}
img {
height: 96px;
border: 1px solid green;
}
</style>
代码呈现的结果如下图所示
image.png
解决方案一
.box的line-height设置跟它自己的高度一样，所有子元素都设置vertical-align的值为middle，代码如下：
<style type="text/css">
.box { height: 128px; border: 1px solid; }
img { height: 96px; border: 1px solid green;}
.box {line-height: 128px;}
.box>*{vertical-align: middle;}
</style>
解决方案二
在.box内增加一个宽度为0，高度为100%的行内块级元素，并将.box所有的子元素的vertical-align设为middle，代码如下：
<style type="text/css">
.box { height: 128px; border: 1px solid; font-size: 0;}
img { height: 96px; border: 1px solid green;}
.fixed {display: inline-block;height: 100%;}
.box>*{vertical-align: middle;font-size: 16px;}
</style>
上面的代码里多了一个font-size：0的样式，这个是为了消除inline-block元素就算宽度为0也会占据空间的负面影响，后面的font-size: 16px;是重新设置字体，不然里面的文字就看不到了。
