css样式之图片+文字垂直居中

最新推荐文章于 2022-02-15 16:17:09 发布

youyudexiaowangzi

最新推荐文章于 2022-02-15 16:17:09 发布

阅读量211

点赞数 1

分类专栏： h5

本文链接：https://blog.csdn.net/youyudexiaowangzi/article/details/105796790

版权

h5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

好久没写前端，今天突然发现就连文字垂直居中都忘了

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>

	<style type="text/css">
		.line{
		}
		.imgInLine{
			width:30px;
			height:30px;
			vertical-align: middle;
		}
		.textInLine{
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="line">
		<img class="imgInLine" src="./704.png">
		<span class="textInLine">我是一行文字</span>
	</div>
</body>
</html>

最简单的垂直居中的设置就是vertical-align: middle;

这个属性是作用与当前元素，设定当前元素位于父元素中垂直方向的位置，

如果父元素有两个或以上的子元素，要想居中就要给所有子元素设置这个属性，如果只给文字设置vertical-align: middle;可能达不到预想中的效果

或者直接应用到所有子元素

		.line *{
			vertical-align: middle;
		}

以此铭记，以免时间长了又忘了

优惠劵

youyudexiaowangzi

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式之图片+文字垂直居中

好久没写前端，今天突然发现就连文字垂直居中都忘了<!DOCTYPE html><html><head> <title>测试</title> <style type="text/css"> .line{ } .imgInLine{ width:30px; height:30px; v...
复制链接

扫一扫