テキストとボタンを一番下に並べる方法

Question

一番下に並んだテキストとボタンを作成したいと思います。私はしかし、ボタンの中央で揃えるようです。このような何か（ちなみに私はbootstrap3を使用しています）

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

を入力した

と同じように、私は私のコードを説明するために JSfiddleを作成しました。デフォルト vertical-alignによってブートストラップで

Answer 1

は、あなたが一番下にそれを変更する必要が真ん中です！重要なブートストラップCSSがすでに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>

Answer 2

に定義 vertical-alignプロパティ

使用vertical-align:bottom !important;を持っているとして、

このCSSを試す

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

Answer 3

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>