要使按钮居中并且其宽度是容器的百分比,可以使用以下方法:
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% */
}
以上两种方法都可以实现按钮居中并且宽度为容器的百分比。具体选择哪种方法取决于你的项目需求和布局结构。
云+社区沙龙online [技术应变力]
云+社区沙龙online第6期[开源之道]
云+社区技术沙龙[第7期]
云+社区技术沙龙[第11期]
云+社区技术沙龙[第18期]
serverless days
第四期Techo TVP开发者峰会
云+社区技术沙龙 [第31期]
领取专属 10元无门槛券
手把手带您无忧上云