如何按底部对齐文本和按钮

Question

我想要创建一个底部对齐的文本和按钮。 像

一样

我输入了类似的内容（BTW我正在使用bootstrap3）

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

但是，它似乎与按钮的中心对齐，我创建了JSfiddle来说明我的代码。

Answer 1

vertical-align属性的默认值为baseline，即所有inline和inline-block元素都根据父元素的baseline进行对齐。

Read More关于Vertical Align css属性。

您可以通过在Bootstrap的vertical-align: bottom类的样式中显式设置.btn来更改此行为，如下所示：

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

Answer 2

默认情况下，在引导程序vertical-align中间需要将其更改为底部！重要因为bootstrap css已经定义了vertical-align属性

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个css

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