CSS 图片与文字垂直居中对齐，文字超出需换行，并从图片底部开始排列

最新推荐文章于 2025-02-07 15:55:46 发布

一只小柚叽

最新推荐文章于 2025-02-07 15:55:46 发布

阅读量481

点赞数 3

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/Kamikorosu/article/details/140467970

版权

效果图：

在这里插入图片描述

html：

<div class="title-box">
		<div class="title-content">
				<span class="title-tag">
						123
				</span>
				<img class="icon" src="/static/images/work/repairicon.png" >
				1. 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
		</div>
</div>

css：

.title-box {
		padding-bottom: 14px;
		border-bottom: 0.5px solid #f1f4fa;
		font-size: 16px;
		color: #333333;
		font-weight: 550;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-content {
			max-width: 315px;
			.title-tag {
				font-size: 12px;
				border-radius: 2px;
				padding: 3px 4px;
				text-align: center;
				height: 20px;
				line-height: 20px;
				margin-right: 5px;
				letter-spacing: 1px;
				font-weight: 400;
				background: #eeeeee;
				color: #999999;
				}
				.icon {
					width: 20px;
					height: 20px;
					margin-right: 5px;
					vertical-align: text-bottom;
				}
			}
		}