可以通过以下方式实现:
- 使用CSS的Flexbox布局:<div class="container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
</div>.container {
display: flex;
justify-content: center;
}
.button {
margin: 0 10px;
}在上述代码中,使用Flexbox布局的
justify-content: center;
属性可以将容器中的内容水平居中,而.button
类设置了按钮之间的间距。 - 使用CSS的Grid布局:<div class="container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
</div>.container {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
gap: 10px;
}在上述代码中,使用Grid布局的
grid-template-columns: repeat(2, auto);
属性将容器分为两列,并使用justify-content: center;
属性将内容水平居中,gap
属性设置了按钮之间的间距。
无论是使用Flexbox还是Grid布局,都可以实现水平居中两个按钮的效果。