flex布局实现文字图片垂直对齐

1、实现前:
flex布局实现文字图片垂直对齐_第1张图片
2、实现代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.user {
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
			}
			
			.desc {
				padding-top: 25px;
				font-size: 40px;
			}
			
		</style>
	</head>

	<body>
		<div class="user">
			<img src="test.png"/>
			<div class="desc">
				文字
			</div>
		</div>
	</body>

</html>

3、实现后:
flex布局实现文字图片垂直对齐_第2张图片

你可能感兴趣的:(css)