文字和盒子对齐

最新推荐文章于 2023-04-09 14:07:39 发布

喵_美

最新推荐文章于 2023-04-09 14:07:39 发布

阅读量1.9k

点赞数 1

分类专栏：案例 html

本文链接：https://blog.csdn.net/qq_34708564/article/details/90289670

版权

html 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

案例

22 篇文章 0 订阅

订阅专栏

实现文字和粉色盒子对齐：
在这里插入图片描述
该方法适合调整文字前面图标的位置，图标放在盒子内，可用背景图或图片的形式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 300px;
		height: 30px;
		border: 1px solid red;
		line-height: 30px;
	}
	span {
		/*	若用block文字会被挤到下一行*/
		display: inline-block;
		/*	不加vertical-align: middle调整margin-top，粉色盒子会和文字一起动*/
		/*	display: inline-block;和vertical-align: middle适合搭配使用*/
		vertical-align: middle;
		width: 10px;
		height: 10px;
		background-color: pink;
    	margin-top: 10px;
	}

	</style>
</head>
<body>
	<div>
		<span></span>  文字
	</div>
</body>
</html>

优惠劵

喵_美

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文字和盒子对齐

实现文字和粉色盒子对齐：该方法适合调整文字前面图标的位置，图标放在盒子内，可用背景图或图片的形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { ...
复制链接

扫一扫