前端学习之垂直对齐(vertical-align)

vertical-align 垂直对齐

1.让带有宽度的块级元素水平居中对齐:margin:0 auto;
2.让文字水平居中对齐:text-align:center;
3.让块级元素垂直居中: 子绝父相,子:top:50%;transform: translateY(-50%);/margin-top:-(子高度的一半) 或者使用后面的弹性布局在父元素中添加display: flex;align-items: center;
4.让文字垂直居中: line-height=父元素的高

vertical-aligin: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

那么 vertical-aligin能很好解决所有垂直居中的问题吗。。nonono~

vertical-align 不影响块级元素中的内容对齐,它只针对行内元素或者行内块元素,特别是行内块元素,通常用来控制图片/表单与文字的对齐。

复习一下:一个文字由如下四条线组成。而行高由上边框+下边框+文字内容组成。
前端学习之垂直对齐(vertical-align)_第1张图片
一张图片默认由基线对齐(即蓝色的那条base-line)如下图:
前端学习之垂直对齐(vertical-align)_第2张图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
      <img src="img/lx/123.jpg" alt="">
      my name is 张三喵
	</div>
</body>
</html>

要想居中对齐的话,就可以设置vertical-align:middle:
前端学习之垂直对齐(vertical-align)_第3张图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			vertical-align: middle; //垂直居中对齐
		}
	</style>
</head>
<body>
	<div>
      <img src="img/lx/123.jpg" alt="">
      my name is 张三喵
	</div>
</body>
模式 单词
基线对齐:默认的是文字和图片基线对齐 vertical-align: baseline;
垂直居中:默认的是文字和图片基线对齐 vertical-align: middle;
顶部对齐:默认的是文字和图片基线对齐 vertical-align: top;

由此,我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字的基线对齐哦~

去除图片底侧空白缝隙

有个很重要的特性:图片或者表单等行内块元素,它的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。如下图:
前端学习之垂直对齐(vertical-align)_第4张图片
解决办法:

  1. 给img 设置vertical:center|top|bottom等等。只要不要让img用默认的基线对齐(baseline)即可。
img{
			vertical-align: bottom; /* 底部对齐 */
			vertical-align: top; /* 顶部对齐 */
			vertical-align: middle; /* 居中对齐 */
		}
  1. 给img设置 display:block; 转为块级元素就不会存在这种问题了。

你可能感兴趣的:(前端学习基础记录,html,css)