移动设备上的 HTML 按钮未像桌面视图那样居中

Question

我创建了一个包含 2 个按钮的网站。在桌面视图上，可以并居中。
但在移动视图中，它们向左移动。我应该在 CSS 上做什么才能使它们在桌面和移动设备上居中？

我试着将style = "margin-left: 5%;修改为10%。但它使两个按钮在桌面上向右移动。

这是我的代码：

<div class="col-md-4 col-xs-12" style = "margin-left: 5%;">
<button type="button" id="lost_item_button" class="btn btn-primary " onclick = "lost()" >A</button>


<button type="button"  style = "background-color: #fefefe;color: #0a0a0a;display:none" id = "found_button_selected" class="btn btn-primary mb-2" onclick = "found()">B</button>

Answer 1

使用bootstrapdiv“text-center”作为

<div class=" col-md-4 col-xs-12 text-center"> <button type="button" id="lost_item_button" class="btn btn-primary " onclick = "lost()" >A</button>

B

或删除 margin-left 仅保证金。

Answer 2

删除保证金并使用 text-center class 应该休息。

<div class="col-md-4 col-xs-12 text-center">
   Content/Buttons
</div>

移动设备上的 HTML 按钮未像桌面视图那样居中

The HTML button on mobile is not centered as desktop view

html

css

responsive-design

bootstrap-4