將三個按鈕放在同一中心線上

-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

將三個按鈕放在同一中心線上

回答

相關問題