如何對齊井內元素？

我正在嘗試將按鈕與井中的一些文本對齊。如何對齊井內元素？

這是最好的，我可以得到：按鈕

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="well"><h4>Download our 2016 Registration form today!<button type="btn" class="btn btn-default centered">Download Now!</button></h4> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

btn { 
background-color: #FFF; 
outline-color: #000; 
}

通過以上我似乎無法得到H4和幹訓局之間的空間。 ..他們是如此緊張在一起，填充&保證金似乎沒有幫助。

此前我嘗試將h4和btn分別插入到col-md-8和col-md-6中，以便擁有自己的空間，但是我無法使其水平對齊。

然後，我在github上閱讀這些帖子https://github.com/twbs/bootstrap/issues/16933 .... https://github.com/twbs/bootstrap/issues/1446 ...聽起來像這個問題已經有一段時間了？

我正在使用一口井，因爲我想保持h4和btn靠近並處於紅色區域以吸引注意力。

任何幫助？

來源

2016-04-23 SaintPaddy

你想這隻與jQuery或CSS？ – guradio

感謝Guradio，CSS或HTML ...我的jquery並不那麼熱衷。 – SaintPaddy

編織：http://kodeweave.sourceforge.net/editor/#6e1a68050ce5981e47e0512857f2dd73

您可以使用media queries這一點。

CSS：

.btn { 
    background-color: #FFF; 
    outline-color: #000; 
    display: inline-block; 
    float: right; 
    margin: -9px 0; 
} 
.well { 
    text-align: left; 
} 

@media all and (max-width: 575px) { 
    .well { 
    text-align: center; 
    } 
    .btn { 
    display: block; 
    clear: both; 
    float: none; 
    text-align: center; 
    margin: 20.92px auto; 
    } 
}

來源

2016-04-23 02:42:55

謝謝Michael Schwartz，我使用這個解決方案，效果很好，而且更容易造型。 – SaintPaddy

是很常見的使用<table><table/>，使您的文字對齊。把按鈕和文本在表格中以1行2個columes

<table> 
    <tr> 
     <td> 
      TEXT 
     <td/> 
     <td> 
      BUTTON 
     <td/> 
    </tr> 
<table/>

如果你的網站（甚至這一個）看看周圍，你會看到頁面是一個大表的按鈕，文本框，IMGS在

瓷磚

來源

2016-04-23 12:55:43

謝謝Donat褲子！ – SaintPaddy

如何對齊井內元素？

回答

相關問題