移动设备上的 HTML 按钮未作为桌面视图居中答案

【问题标题】：The HTML button on mobile is not centered as desktop view移动设备上的 HTML 按钮未作为桌面视图居中
【发布时间】：2021-02-05 00:14:37
【问题描述】：

我创建了一个包含 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>

【问题讨论】：

标签： html css bootstrap-4 responsive-design

【解决方案1】：

删除 Margin 并使用 text-center 类应该做休息。

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

【讨论】：

【解决方案2】：

使用 bootstrap div "text-center" as

<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>

或者只删除左边距到边距。

【讨论】：