css-让2个span标签水平居中

最新推荐文章于 2025-05-25 18:34:15 发布

矢目

最新推荐文章于 2025-05-25 18:34:15 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48104836/article/details/127720802

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS实现两个span标签在其父级容器中水平居中的方法。通过设置父级div的宽度、使用`margin: 0 auto;`使子元素居中，并通过`text-align: center;`确保span内的文本也居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css-让2个span标签水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* 总结：*/
			.d1{
				width: 300px;
				height: 100px;
				background-color: pink;
			}
			.d2{
				/* 1.给span父级dd加宽度随便, */
				
				width: 80%;
				background-color: blue;
				/* 让d2相对d1 盒子水平居中 */
				margin: 0 auto;
				/* 让文字居中 */
				text-align: center;
			}
			.d2 span{
				width: 100px;
				height: 20px;
				background-color: purple;
				
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">
				<span>我是行内块1</span>
				<span>我是行内块2</span>
			</div>
		
		</div>
	</body>
</html>