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

-3

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

这恶化了大幕

我怎样才能得到所有这些按钮坐在同一个中心点上？

直播网址：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>

来源

2016-04-09 Sam Jefferies

只是删除此为'第一个按钮＃step1button'。它有'margin-top' – Pedram

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。虽然您提供了[**链接到网站或示例**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work如果链接变得无效，那么你的问题对于其他具有相同问题的未来SO用户是没有价值的。 –

@Paulie_D虽然我完全同意。这个例子中强调的问题肯定是针对这个用例的，所以它对未来其他人有用的几率非常低。 – Ryuu

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

这意味着它是在移动设备上非常混乱，以了解该按钮了用户，这看起来像：

通过添加一个简单的<br />我能够推动一个奇按钮与其他两个按钮放在同一行上。

我然后取出：

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

来源

2016-04-11 09:40:08

的问题是，你无法预测在上述部分文本将始终在同一点结束的话，因为他们目前来看，这在技术上不可行。有一些hacky修复你可以做，但我认为最好的解决方案是将按钮从这些容器中完全取出，并且有一个单独的“row”元素包含它们。

这样，如果其中一列中的文本由于某种原因（添加了文本，不同的屏幕尺寸）而变得更长，则整个“按钮行”将被平等地按下，并且按钮将始终保持相同的基线

希望是有道理的

来源

2016-04-09 09:41:27 Ryuu

他也可以用那些元素改变那一行来做一个弹性显示，不是吗？ – Jhecht

是的，但这样做几乎可以消除IE正确显示的原因，因为Flex-Box没有被广泛支持。当然，可以使用一个polyfill库。但显示简单，真的不应该取决于JS – Ryuu

我想。因为它基本上不符合标准，所以我不会过分关心IE。 – Jhecht

修改行homepagestyle.css

#step1button { 
    margin-top: 21px; 
}

这将解决您的问题

来源

2016-04-09 09:44:58

您的解决方案仅适用于特定的屏幕宽度。我在1920x1080查看它，它根本没有解决这个问题。将窗口对准一侧，产生960像素的宽度，使问题更加严重 – Ryuu

在这种情况下，他应该在div外写入按钮代码。至少我认为这可能会更容易处理它。 –

请参阅我的回答 – Ryuu

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

回答

相关问题