Html 将三个按钮放置在同一中心线上

我在同一行和容器中有三个单独的按钮，但是由于它们上面的内容，它们并不都在同一水平线上

这在大屏幕上更糟

如何使所有这些按钮位于同一中心点

实时网址：

HTML

---

问题是，你无法预测上述章节中的文本将始终在同一点结束，因此，就目前而言，这在技术上是不可能的。您可以进行一些黑客修复，但我认为最好的解决方案是将按钮完全从这些容器中取出，并使用一个单独的行元素来包含它们

这样，如果其中一列中的文本由于任何原因而变长，添加的文本、不同的屏幕大小，则整个按钮行将被均匀地按下，并且按钮将始终保持相同的基线

---

希望这有意义

修改homepagestyle.css中的行

#step1button {
    margin-top: 21px;
}

---

这将解决您的问题

使用单独一行的问题是，在移动设备上，单独一行中的所有三个按钮都远离其相关内容

这意味着，在移动设备上，理解用户使用的按钮非常混乱，这看起来像：

   <div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
                        <br />
                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>


<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>


              </div>
              </div>

通过添加一个简单的按钮，我可以将一个奇数按钮与其他两个按钮按在同一行上

然后我删除了：

              #step1button {
margin-top: 30px;
}

最后的HTML看起来像：

   <div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
                        <br />
                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>


<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>


              </div>
              </div>

---

只需删除第一个按钮的Step1按钮。它有许多问题，寻求代码帮助必须包括在问题本身中复制代码所需的最短代码。虽然您提供了一个链接，但如果链接无效，您的问题对其他将来有相同问题的用户将毫无价值。@Paulie_D，尽管我完全同意。当然，在这个例子中强调的问题对于这个用例来说是非常具体的，所以它在未来对其他人有用的可能性非常低。太本地化过去也是一个很接近的原因…只是说。我明白你的观点，但是，这不再是一个原因。更不用说，如果它仍然存在，它会通过限制用户可以问什么和如何问来疏远很多用户。他还可以用这些元素将该行更改为flex显示，不是吗？是的，但是这样做会使IE无法正确显示，因为flex box没有得到广泛的支持。当然，也可以使用polyfill库。但是像这样简单的显示真的不应该依赖于JSI。我不太关心IE，因为它基本上不符合标准。它实际上非常符合标准，问题是它不会像其他浏览器一样在标准改变时得到更新。但是考虑到全球的使用率显然是5%，我不会太担心它。特别是考虑到大部分可能是强制性使用，因为它是许多企业强制员工使用的浏览器。最终，不管是否灵活，你的加价很可能必须改变才能实现你的目标。让我知道它是如何进行的这种方法的问题是，在移动设备上，按钮与相关内容分开放置。事实上，所有三个按钮都位于所有三个div的下方。我找到了一个简单的解决方案。你的解决方案只能在特定的屏幕宽度下工作。我在1920x1080上查看它，它根本没有解决这个问题。将窗口弹到一边，导致宽度为960px，这使问题更加严重。在这种情况下，他应该在div之外编写按钮代码。至少我认为这可能更容易处理。请参阅我的回答。对不起。我还没有看到你的答案@没问题。我感谢你的贡献：