要让.guide-step-one水平垂直居中,可以使用flex布局和对应的属性设置。可以按照以下方式修改CSS代码:
.guide-step-one {
width: 100%;
height: 100%;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center;
img {
width: 337px;
height: 272px;
}
.step-button {
width: 100%;
display: flex;
justify-content: center;
li {
margin: 0 10px;
}
li:nth-child(1) button {
width: 120px;
height: 36px;
background-color: red;
border-radius: 330px;
border: none;
}
li:nth-child(2) button {
width: 120px;
height: 36px;
background-color:#f35440 ;
color:#ffffff ;
border-radius:330px ;
border:none ;
}
}
通过添加display:flex; justify-content:center; align-items:center;
属性,可以使.guide-step-one元素水平垂直居中。
内容由零声教学AI助手提供,问题来源于学员提问