Question

我只是一个小问题。我有这段代码：

<a href="#" class="btn btn-primary" style="margin-left:580px;"></a>

按钮位于页面的中央，当我调整浏览器大小时，上面的文字很好地缩小并适合较小的屏幕尺寸。然而，按钮停留在同一个地方，当我到达智能手机的断点时 - 它根本不显示。

如何对齐/移动按钮，以便在文本下方的中央，小屏幕上显示按钮？

Answer 1

您的style不是动态的。

如果您希望按钮水平居中，请改为：margin-left: auto; margin-right: auto;

如果这不是您的目标，请使用您的CSS和HTML更新您的问题，以便我们获得更多背景信息。

Answer 2

由于您指定了style=margin-left

，它将保留在同一位置

您可以将其设置为auto，也可以将其设置为auto，以保持在中心位置。

Answer 3

以下两个解决方案将页面上的按钮居中：

1）更改“margin-left：580px;”到“margin-left：50％”的“％”值

2）使用flex-box并将“a”标记放在具有以下CSS的div中：显示：flex; align-items：center;

.container-for-button {
    display: flex;
    align-items: center;
}

<!-- Old Button-->
<a href="#" class="btn btn-primary" style="margin-left:580px;">Lorum</a>

<br />

<!--Solution 1-->
<a href="#" class="btn btn-primary" style="margin-left:50%">Lorum</a>

<br />

<!--Solution 2-->
<div class="container-for-button">
  <a href="#" class="btn btn-primary" style="margin:0 auto; ">Lorum</a>
</div>

如何在调整浏览器 - 移动屏幕大小时将引导按钮对齐到左侧

3 个答案: