【CSS】vertical-align属性

小猫娃来啦

已于 2023-03-03 08:49:04 修改

阅读量3.5k

点赞数 1

分类专栏： css 文章标签：前端 css css3 html 开发语言

于 2022-11-30 15:15:14 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/128114234

版权

css 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

很多程序员敲代码写样式时，是否会遇到以下情况？

一行5个元素，然后要求一上一下排列；
一行10个元素，要求前7个元素垂直居中，第八，第九个元素分别一上一下，第十个元素垂直居中；
一张图片，一段文字，另一段文字，图片和第一段文字要垂直居中。

诸如此类...

总之一句话，就是极其不规律，我们如果用弹性盒去处理这些元素，得到的结果是全部垂直居中，或者全部换行。特异性的针对某一个，某几个元素设置样式，我们也可以通过定位，或者设置外边距，内边距实现。但是如果有大量元素呢？那肯定是有局限性的

今天，我们研究一个新属性，很少见，但是有时候，却可以解决大问题。

那就是 vertical-align属性，vertical-align属性用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

以下是这个属性的属性值

vertical-align: baseline;        //使元素的基线与父元素的基线对齐。
vertical-align: sub;             //使元素的基线与父元素的下标基线对齐。
vertical-align: super;           //使元素的基线与父元素的上标基线对齐。
vertical-align: text-top;        //使元素的顶部与父元素的字体顶部对齐。
vertical-align: text-bottom;     //使元素的底部与父元素的字体底部对齐。
vertical-align: middle;          //使元素的中部与父元素的基线加上父元素高的一半对齐。
vertical-align: top;             //使元素的基线对齐到父元素的基线之上的给定长度，可以是负数。
vertical-align: bottom;          //使元素的基线对齐到父元素的基线之上的给定百分比。

我个人习惯于用div，钟爱div，可以说用习惯了，用顺手了。那么只需要将div转化为行内元素，即可使用这个属性。

就拿以下代码为例我们进行说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#box {
				margin-left: 20vw;
				margin-top: 20vh;
			}

			#box img {
				width: 18.75rem;
				height: 12.5rem;
			}

			#first{
				text-decoration: underline;
				font-size: 1em;
			}

			#second{
				color: red;
				margin-left: 100px;
				font-size: 2em;
			}
			p{
				display: inline;
			}
			#box div{
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="https://img-blog.csdnimg.cn/324a6024d7904849aa3810761cf7123e.png"
				alt="">
			<span id="first">我是猿猴</span>
			<span id="second">我是程序员</span>
			<p>baseline model</p>
			<div>加菲猫</div>
		</div>
	</body>
</html>

运行效果如下：

我们会发现，文字是按照基线排列的，这是默认样式。但如果我们给“我是程序员”这个元素加上vertical-align: middle;表示使元素的中部与父元素的基线加上父元素高的一半对齐。效果如下：

我们发现了这个内容为“我是程序员”的span标签，的确是依照父元素基线下降了原来的一半。那么如果我们给图片同样设置这个属性，会有何变化？

除了刚刚我们设置过的，内容为“我是程序员”的span标签之外，所有元素都实现了垂直居中。

其他的属性值更是有不同的效果，也可以实现一上一下的排列。

自己尝试，多琢磨几遍，就能掌握了。

细想一下，这个属性在平时一般用不到，但是有时候解决某些问题，确实会有妙用。

小猫娃来啦

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】vertical-align属性

总之一句话，就是极其不规律，我们如果用弹性盒去处理这些元素，得到的结果是全部垂直居中，或者全部换行。特异性的针对某一个，某几个元素设置样式，我们也可以通过定位，或者设置外边距，内边距实现。但是如果有大量元素呢？//使元素的基线对齐到父元素的基线之上的给定长度，可以是负数。//使元素的中部与父元素的基线加上父元素高的一半对齐。//使元素的基线对齐到父元素的基线之上的给定百分比。//使元素的基线与父元素的下标基线对齐。//使元素的基线与父元素的基线对齐。使元素的中部与父元素的基线加上父元素高的一半对齐。
复制链接

扫一扫