我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

CSS 垂直对齐方式「vertical-align」

预计阅读时间: 3 分钟

1、Demo1 案例：img 元素底部间隙问题

页面元素
1<div class="demo1">
2	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
3</div>
样式代码
1.demo1 {
2	background-color: #20b2aa;
3}
4
5img {
6	width: 200px;
7}

注：图片底部有一定高度的间隙

y1.png

样式代码
1.demo1 {
2	background-color: #20b2aa;
3	font-size: 0;
4}
5
6img {
7	width: 200px;
8}

方法一：给父元素设置 font-size: 0px 清除底部多余间隙

样式代码
1.demo1 {
2	background-color: #20b2aa;
3}
4
5img {
6	width: 200px;
7	vertical-align: bottom;
8}

方式二：给行 内块元素设置 vertical-align: bottom（推荐使用该方法）

y12.png

2、Demo2 案例：img 元素居中上下留白高度不一致问题

页面布局
1<div class="demo2">
2	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
3	<!-- 解决问题后续添加的占位元素 -->
4	<div></div>
5</div>
样式代码
1.demo2 {
2	width: 400px;
3	height: 200px;
4	line-height: 200px;
5	background-color: #cccccc;
6}
7
8img {
9	height: 190px;
10	vertical-align: middle;
11}

注：图片上下间隙不对称

y1.png

解决办法：

样式代码
1.demo2 {
2	width: 400px;
3	height: 200px;
4	line-height: 200px;
5	background-color: #cccccc;
6	/* 1、font-size: 0px; 行内元素垂直对齐 */
7	font-size: 0px;
8}

方法一：给父元素添加  font-size: 0px 行内元素垂直对齐

样式代码
1.demo2 {
2	width: 400px;
3	height: 200px;
4	/* line-height: 200px; */
5	background-color: #cccccc;
6}
7
8.demo2 div {
9	display: inline-block;
10	height: 100%;
11	width: 0;
12	vertical-align: middle;
13}

方法二：去掉父元素的行高，添加一个与父元素等高的子元素，并设置 vertical-align: middle

y12.png

注意：👀
  1. 兄弟元素影响父元素的基线，而图片的定位是需要父元素的基线的
  2. 父元素的基线受  vertical-align 影响
  3. 父元素的 font-size
  4. 父元素的 line-height
  5. 某个子元素的对齐方式

3、Demo3 案例：行内块元素的错位问题

页面代码
1<div class="d3"></div>
2<div class="d3 d3b">X</div>
样式代码
1div.d3 {
2	display: inline-block;
3	width: 100px;
4	height: 100px;
5	background-color: #9acd32;
6}

注：行内元素若没有文字的时候它的基线为元素的底部，若有文字则为内部文字的基线位置

y1.png

解决办法：

样式代码
1.d3b {
2	overflow: hidden;
3}

注：给第二个包含文本的元素添加 overflow: hidden，元素不再出现错位

y12.png

4、Demo4 案例：文本&行内块元素垂直居中

页面代码
1<div class="demo4">
2	x
3	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" class="img" />
4	<!-- 为实现垂直居中而后添加的元素 -->
5	<div></div>
6</div>
样式代码
1.demo4 {
2	width: 400px;
3	height: 200px;
4	background-color: #add8e6;
5}
6
7.demo4 img {
8	width: 320px;
9	height: 180px;
10	vertical-align: middle;
11}

注：子元素没有相对父元素居中

y1.png

解决办法：

样式代码
1.demo4 > div {
2	display: inline-block;
3	width: 0;
4	height: 100%;
5	vertical-align: middle;
6	background-color: bisque;
7}

注：行内元素没有文字的时候它的基线为元素的底部，若有文字则为内部文字基线位置。

y2.png

5、Demo5 案例：文本影响元素基线对齐方式

页面布局
1<div class="demo5">
2	<div></div>
3	<div>x</div>
4</div>
样式代码
1.demo5 {
2	display: inline-block;
3	/* 影响对齐方式 */
4	font-size: 0px;
5	background-color: #aaaaaa;
6}
7
8.demo5 > div {
9	display: inline-block;
10	width: 100px;
11	height: 100px;
12	background-color: #ff1493;
13}

图一：错位                                           y1.png

图二：理想状态 y2.png

注意「👀」

  对父元素添加  font-size: 0；去掉父元素的 font-size: 0px带有字母的盒子就会错位；第二个盒子继承父元素的行高，而行高大于元素本身的高度，所以就挤出了盒子，而第一个盒子对齐的是父元素的基线，而父元素的基线被第二个盒子拉了下来。