图片和文字同时居中「In CSS」

问题描述

如图所示，要使得一个图片和一行文字水平和垂直方向同时居中。

水平居中

水平居中的问题很简单。因为图片是一个内联元素。所有内联元素都可以看成是一行文字来排列。

所以设置 text-align:center 即可实现图片和文字同时水平居中。

垂直居中

对于单行文字的垂直居中，我们想到 line-height = height 即可解决。

因此我们对父元素进行属性设置，使其line-height = height 。

果然实现了文字垂直居中，但是图片却没有垂直居中。

为什么？

后来查资料发现对于每一个行内元素，自身都有一个属性 vertical-align ，影响其自身在所在行的排列方式。

那么一个行内元素在行内的排列方式有什么决定呢？

自身对齐方式（即 vertical-align 属性） + 所在行基线。

比如说对行内元素默认的 vertical-align 属性值是 baseline 即此行内元素的基线与所在行的基线在同一条直线上。

因此也不难想象为什么上图图片的问题了。

所以只要将图片的vertical-align属性修改为 middle 属性即可对齐。

vertical-align属性也说明了图片和其他行内元素明明高度合适却不能处在同一行

例子：首先证明其他行内元素在高度合适的情况下是可以处在同一行的。

<div class="box">
	<input type="text" id="test">
	<input type="password" id="pasw">
</div>
1
2
3
4

.box {
	height: 30px;
	width: 500px;
    border: 1px solid red;
    /* 是div元素居中，这个不用管*/
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
   
.box #pasw {
	width: 400px;
    height: 28px;
    border: 1px solid green;
    vertical-align: bottom;
}
        
.box #test {
    width: 30px;
	height: 28px;
    border: 1px solid blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如下：

没有任何问题。

但是一旦出现图片：

<div class="box">
	<img src="../images/close.png" alt="">
	<input type="password" id="pasw">
</div>
1
2
3
4

.box {
	height: 30px;
	width: 500px;
    border: 1px solid red;
    /* 是div元素居中，这个不用管*/
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
   
.box #pasw {
	width: 400px;
    height: 28px;
    border: 1px solid green;
    vertical-align: bottom;
}
        
.box img {
    width: 30px;
	height: 28px;
    border: 1px solid blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

就会出现问题了。

这是因为行内元素的对其方式导致的，只需将图片的vertical-align属性设置为top即可解决。