![the]( "the")
本文介绍了将三个按钮放在同一条中心线上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在同一行和容器中有三个单独的按钮，但是由于它们上面的内容，它们并不都在同一条水平线上.
这在大屏幕上更糟
如何让所有这些按钮都位于同一个中心点?
实时网址:
通过添加一个简单的<br/>，我能够将一个奇怪的按钮与其他两个按钮推到同一行上.
然后我删除了:
#step1button {边距顶部:30px；}
所以最终的 HTML 看起来像:
<div class="row"><div class="fadein bg-3 text-center"><h3 class="h3big">您需要什么帮助?</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 到 paycheque?</p><figure><img src="/img/pound-coins.jpg" alt="省钱图片" title="省钱" class="tripleimage"><figcaption><b>感觉每天都在走钢丝?</b><br>陷入工资支票支付支票周期，无法控制预算，没有预算，使用信用卡或没有储蓄?<br><br><br/><b>第 1 课</b>- 了解我是如何逃避薪水支票到薪水支票周期的.</figcaption></图><button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">现在开始上课</button>
I have three separate buttons within the same row and container, however due to the content above them, they're not all on the same horizontal line.
This is worsened on a big screen
How can I get all these buttons sitting on the same centre point?
Live URL: http://185.123.97.138/~kidsdrum/moneynest.co.uk/
HTML
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
解决方案
The problem with using a seperate row was that on a mobile device all the three buttons (in the seperate row) sat away from their relevant content.
This meant it was very confusing on a mobile device to understand what the buttons took the user to, this looked like:
By adding a simple <br /> I was able to push the one odd button onto the same line as the other two buttons.
I then removed:
#step1button {
margin-top: 30px;
}
So the final HTML looked like:
<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>
这篇关于将三个按钮放在同一条中心线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！