css(图片在上方，文字在上方，垂直水平展示)

Lineason

已于 2022-10-04 10:46:10 修改

阅读量1.1k

点赞数 2

文章标签： css css3 html

于 2022-10-04 10:44:57 首次发布

本文链接：https://blog.csdn.net/m0_62496369/article/details/127160087

版权

css(图片在上方，文字在上方，垂直水平展示)

		<div class="son">
			<img src="./img/me.png" alt="">
			<text class="info">数码产品</text>
		</div>
		<div class="son">
			<img src="./img/me.png" alt="">
			<text class="info">数码产品</text>
		</div>
		<div class="son">
			<img src="./img/me.png" alt="">
			<text class="info">数码产品</text>
		</div>
	</div>

项目	Value	注释
justify-content	space-between	元素两边留有空隙
flex-directio	row	所有元素放置一行
flex-direction	column	元素垂直显示

		.dad {
			/* 调整父亲的宽度和长度 */
			width: 50%;
			height: 50%;
			/* 两边留有空隙 */
			justify-content: space-between;
			/* 所有元素放置一行 */
			flex-direction: row;
			display: flex;
		}

		.son {
			left: 10px;
			display: flex;
			/* 元素垂直显示 */
			flex-direction: column;
			/* 居中 */
			align-items: center;
		}

		.son img {
			width: 12px;
			height: 12px;
		}