我如何使用内联 css 居中 2 块按钮？答案

【问题标题】：How do i center 2 block button using inline css?我如何使用内联 css 居中 2 块按钮？
【发布时间】：2021-08-09 19:23:50
【问题描述】：

我在使用内联 css 将 2 个块按钮居中时遇到问题我使用引导程序中的黑暗主题。我不能完全编辑css。我只能做内联css，因为我使用的是cdn版本的主题。

            <a href='/start'><button class="btn btn-lg btn-primary" type="button">rbutton1</button>
            <a href='/stop'><button class="btn btn-lg btn-primary" 
type="button">rbutton2</button>```

Like i mentioned, i can only do inline css since its a cdn based theme.

【问题讨论】：

您需要为这 2 个按钮的父级（包装器）添加一些样式。检查 bootstrap 和 flex（bootstrap 使用 flex）如何在页面中居中
就像我之前提到的，我使用的是cdn版本
然后？据我了解，您可以添加内联样式。那么劫持在哪里？

标签： html css bootstrap-4

【解决方案1】：

如果您可以向此页面添加样式标签并且它没有被删除，您可以这样做。

<style>
 a  {width:500px;display:block;margin:0 auto;}
</style>

【讨论】：

【解决方案2】：

您也可以为此使用 flex。

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  </head>

  <body>

    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <a href='/start'><button class="btn btn-lg btn-primary" type="button">rbutton1</button>
      <a href='/stop'><button class="btn btn-lg btn-primary" type="button">rbutton2</button>
    </div>

  </body>

</html>

style="display: flex; flex-direction: column; justify-content: center; align-items: center;" 的 div 将使两个按钮居中对齐。

【讨论】：

【解决方案3】：

首先为什么要在a 标记内使用button，只需将类直接添加到a 标记和text-center 类到父元素。或者你可以用button标签做同样的事情

    <div class="text-center">
        <a href="/start" class="btn btn-lg btn-primary">rbutton1</a>
        <a href="/stop" class="btn btn-lg btn-primary">rbutton2</a>
    </div>

但是在按钮标签中你不能添加href=""属性

<div class="text-center">
    <button class="btn btn-lg btn-primary " type="button">rbutton1</button>
    <button class="btn btn-lg btn-primary" type="button">rbutton2</button>
</div>

【讨论】：