要使按钮居中并且其宽度是容器的百分比,可以使用以下方法:
justify-content: center;
将按钮水平居中,使用width: 100%;
将按钮宽度设置为容器的百分比。示例代码如下:<div class="container">
<button class="centered-button">按钮</button>
</div>
.container {
display: flex;
justify-content: center;
}
.centered-button {
width: 80%; /* 设置按钮宽度为容器宽度的80% */
}
<div class="container">
<button class="centered-button">按钮</button>
</div>
.container {
position: relative;
}
.centered-button {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80%; /* 设置按钮宽度为容器宽度的80% */
}
以上两种方法都可以实现按钮居中并且宽度为容器的百分比。具体选择哪种方法取决于你的项目需求和布局结构。
领取专属 10元无门槛券
手把手带您无忧上云