web前端?
发布网友
发布时间：2022-04-27 09:39
共2个回答
热心网友
时间：2023-09-21 11:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
* {
margin: 0;
padding: 0;
}
.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
<p>文字</p>
<img src="./123.jpg">
</div>
</body>
</html>
热心网友
时间：2023-09-21 11:38
① 在body中，body中还有文字标签和图片标签：
<p>文字...</p>
<p>文字...</p>
<img src="..." alt="" />
再设置css样式时给body选择器设置display：flex；
② 接着分析这个图片：需要实现主轴上居中显示（侧轴上暂时不用这样），此时水平方向是主轴，所以再接着在body样式中设置：justify-content: center;
③ 注意：
以上justify-content是设置主轴上的对齐方式；
而align-content属性是针对于“侧轴上”多行元素时的情况，
“侧轴上”单行就用align-items：center；
