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

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）更改"边缘左：580px;"；以"左键：50％"的"％"值

2）使用Flex-Box，然后将" A"标签放入具有以下CSS的DIV中： 显示：Flex; Align-Items：中心;

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