【问题标题】:Vertical cell alignment with Bootstrap 4使用 Bootstrap 4 进行垂直单元格对齐
【发布时间】:2016-08-07 02:58:20
【问题描述】:

我正在创建一个管理页面,用于查询然后报告网站关键页面的页面权重(登陆等)

由于 Bootstrap 4 已接近尾声,我已使用它来创建布局,对此我很满意。但是,对于每一行,单元格中的文本不是垂直对齐的。我可以做一个简单的右对齐:

.cell { text-align: right; }

但我也想垂直对齐。我相信 Bootstrap 4 正在使用 flexbox。有没有办法使用 flex 在单元格中进行垂直文本对齐?我的例子在CodePen

【问题讨论】:

  • 您似乎已将解决方案添加到您的 CodePen 示例中,这让我困惑了几分钟。
  • 无需道歉,我只是想添加一个评论,以防其他人看到这个并想知道当所有内容都已垂直对齐时,您所说的垂直对齐是什么意思。

标签: html css twitter-bootstrap-4


【解决方案1】:

它们已经对齐,它在按钮内部填充,使第二列上的文本未对齐 w.r.t。首先。

将以下 css 添加到第二列文本:

padding: .375rem 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
vertical-align: middle;

【讨论】:

  • 太棒了。谢谢!
  • @timbo np,我想下次再帮你
  • @timbo:你需要的只是填充。我不明白为什么其他任何东西都是必要的。 font-size、font-weight 和 line-height 已经具有相同的值,并且不需要垂直对齐,因为填充正在做居中。
猜你喜欢
  • 1970-01-01
  • 2017-11-05
  • 2017-10-13
  • 2022-01-10
  • 2017-05-11
  • 1970-01-01
  • 2017-09-04
  • 2017-05-07
  • 1970-01-01
相关资源
最近更新 更多