如何通過底部對齊文本和按鈕

我鍵入的內容是這樣的（順便說一句，我使用bootstrap3）

123 <button class ="btn btn-default btn-lg ">123</button>

然而，它似乎通過按鍵的中心對齊，我創建了一個JSfiddle來說明我的代碼。

來源

2016-08-24 Coda Chang

在引導默認vertical-align是中間你需要將它與改變底部！重要的引導CSS是已經有定義vertical-align財產

使用vertical-align:bottom !important;到button

body { 
 
    margin: 10px; 
 
} 
 
button{ 
 
    vertical-align:bottom !important 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
123 <button class ="btn btn-default btn-lg ">123</button>

來源

2016-08-24 05:49:43

這是工作！謝謝，順便說一句，你怎麼把這個可運行的片段？ –

我以爲它不需要'！important' –

你需要在這裏，因爲在bootstrap.css中同樣的屬性也存在......但是如果你正在以bootstrap.css之後的方式寫入，那麼不需要！重要 –

試試這個css

a.btn-lg{ 
padding: 10px 16px 0; 
}

來源

2016-08-24 05:51:14 Friend

vertical-align的默認值屬性爲baseline即所有inline和inline-block元素根據父元素的baseline進行對齊。

Read More關於垂直對齊css屬性。

您可以通過在風格引導的.btn類的明確設置vertical-align: bottom如下圖所示改變這種行爲：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.btn-default { 
 
    vertical-align: bottom; 
 
}

123 <button class ="btn btn-default btn-lg ">123</button>

來源

2016-08-24 06:10:14

如何通過底部對齊文本和按鈕

回答

相關問題