前端开发过程中，经常遇到这样的布局“同一行的图片和文字都垂直居中”，如下图所示：
现将几种实现方法总结如下：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<
body
>
<
div
class
=
"line methodOne"
>
<
img
src
=
"images/logo.png"
alt
=
"图片"
/>
<
span
>我是文字</
span
>
</
div
>
<
div
class
=
"line methodTwo"
>
<
img
src
=
"images/logo.png"
alt
=
"图片"
/>
<
span
>我是文字</
span
>
</
div
>
<
div
class
=
"line methodThree"
>
<
img
src
=
"images/logo.png"
alt
=
"图片"
/>
<
span
>我是文字</
span
>
</
div
>
<
div
class
=
"line methodFour"
>
<
img
src
=
"images/logo.png"
alt
=
"图片"
/>
<
span
>我是文字</
span
>
</
div
>
</
body
>
|
css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
* {
margin
:
0
;
padding
:
0
;
}
body {
padding
:
0
10px
;
}
.line {
font-size
:
20px
;
border-bottom
:
1px
solid
#dddddd
;
}
.line img {
width
:
80px
;
height
:
80px
;
border-radius:
50%
;
margin-right
:
20px
;
}
|
方法1:padding+line-height
|
1
2
3
4
5
6
7
8
|
.methodOne {
padding
:
20px
0
;
}
.methodOne span {
line-height
:
80px
;
vertical-align
:
top
;
}
|
方法2:display:flex;+align-items:center;
|
1
2
3
4
5
|
.methodTwo {
display
: flex;
height
:
120px
;
align-items:
center
;
}
|
注意：父级元素设置display:flex;后，子元素float失效。
方法3:padding+vertical-align:middle;
|
1
2
3
4
5
6
7
|
.methodThree {
padding
:
20px
0
;
}
.methodThree * {
vertical-align
:
middle
;
}
|
方法4:line-height+vertical-align:middle;
|
1
2
3
4
5
6
7
|
.methodFour {
height
:
120px
;
line-height
:
120px
;
}
.methodFour *{
vertical-align
:
middle
;
}
|
方法5：使用 Flexbox 实现子元素的居中效果，只需三行代码：
@mixin center-children {
display: flex;
justify-content: center;
align-items: center;
}
由于 Flexbox 还是比较新的属性，那么添加上相关的浏览器前缀的话，会让它拥有更广泛的兼容性。
.parent {
@include center-children;
}
正如你料想的那样，就这么简单我们就实现了：
.parent {
display: flex;
justify-content: center;
align-items: center;
}