代码之家 › 专栏 › 技术社区 › r3plica

引导4按钮文本对齐

bootstrap-4 css html

-3

r3plica · 技术社区 · 6 年前

这应该不难,但我快疯了我有一个简单的按钮(用于测试目的)如下所示:

.btn-test {
  height: 100px;
}

<button class="btn btn-test">
  <span>This is a test</span>
</button>

如果您正在使用引导并运行这段代码,您将看到:

https://codepen.io/r3plica/pen/MPbryQ

如您所见,文本“This is a test”是垂直对齐的。我已经看了CSS的按钮,我没有看到这是设置。我想这和flexbox有关。我试过添加 align-items-start 按钮类,但没有任何更改。

肯定有人知道如何轻松地将文本与顶部或底部对齐?

3 回复 | 直到 6 年前

Nikhil Kinkar 6 年前

你需要加上 .d-flex 在按钮中,之后可以应用其他定位类,例如 .align-self-start , .align-self-end , .align-self-baseline 等,这将相应地定位文本。

即使你不申请 .对齐自启动 它将默认位于顶部。

<button class="btn btn-test d-flex">
    <span class="align-self-start">This is a test</span>
</button>

这应该对你有用。

niclas_4 6 年前

line-height . 更改为所需的值(高度)。

.btn-test {
  height: 100px;
  line-height: 150px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-test btn-primary">
  <span>This is a test</span>
</button>

shnorkel 6 年前

我不认为引导程序中的按钮是软盒。不管怎样,我试过这个,它把文本放在按钮的顶部:

<button class="btn btn-test d-flex align-items-start">
  <span>This is a test</span>
</button>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前