CSS中vertical-align和text-align属性详解（使用场景、举例、注意点）、display：table-cell使用详解（基础介绍和使用例子）。

最新推荐文章于 2024-02-04 16:20:58 发布

原创最新推荐文章于 2024-02-04 16:20:58 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vertical-align #text-align详解 #table-cell使用详解 #table-cell使用例子 #table-cell知识点总结

CSS 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了CSS中垂直对齐属性vertical-align和水平对齐属性text-align的使用方法，包括不同情况下的对齐效果及display: table-cell属性的应用技巧。

vertical-align

注意点

text-align

display：table-cell使用详解

基础介绍

使用例子

vertical-align

元素之间垂直方向对齐属性。下面以inline-block元素和inline元素为例：

当文字与带有inline-block属性的元素连接时，会以底对齐的形式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			height: 100px;
			width: 100px;
			background-color: red;
			display: inline-block;
		}
	</style>
</head>
<body>	
	<div></div>abc
</body>
</html>

显示结果：