文本元素底边对齐问题

最新推荐文章于 2022-06-04 14:06:18 发布

Nemo.1213

最新推荐文章于 2022-06-04 14:06:18 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_45763491/article/details/107751531

版权

本文探讨了行级块元素在不同情况下文本的底边对齐问题。当元素无内容时，文本与其盒子底边对齐；有内容时，则与内部文字底边对齐。通过使用CSS属性`vertical-align`，可以调整文本的垂直对齐位置，例如设置为`middle`、数值或负数值来实现不同的对齐效果。

摘要由CSDN通过智能技术生成

1.当行级块元素里没有内容时，后面跟着的文本和它盒子的底边对齐：

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		span{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: red;
		}
</style>

<body>
	<span></span>呵呵
</body>

效果图：

2. 当行级块元素里有文字时，后面跟着的文本和它里面的文字底边对齐：

<style type="text/css">
    *{
		margin: 0;
		padding: 0;
	}
	span{
		display: inline-block;
		width: 100px;
		height: 100px;
		background-color: red;
        font-size: 50px;
	}
</style>

<body>
	<span>哈哈</span>呵呵
</body>

效果图：