html - 垂直对齐文本 Bootstrap 4

<分区>

再一次，我需要你的帮助。

我的元素有问题。在我的 menu 上，当我选择其中一个时，我希望边框位于 menu 的底部并且文本垂直对齐但 vertical- align : middle 与 display table 破坏了我所有的 menu。

这是我的代码:

.infos-btn {
  text-transform: uppercase;
  color: #482A81;
  box-shadow: 0px 3px 10px #888;
}

.infos-btn>div:hover {
  cursor: pointer;
}

.selected-btn {
  border-bottom: 3px solid #482A81;
  color: #482A81;
  font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row text-center px-3 infos-btn">
  <div class="col-md col-sm py-3 selected-btn">Menu</div>
  <div class="col-md col-sm py-3">Menu</div>
  <div class="col-md col-sm py-3">Menu</div>
  <div class="col-md col-sm py-3">Menu longer than others</div>
  <div class="col-md col-sm py-3">Menu</div>
</div>

我希望它能够响应并且我知道如果我设置一个边距 : 0 auto;它会工作，但边框不会在菜单底部

感谢您的帮助!

最佳答案

尝试 width : 50% 这样它总是从屏幕的 50% 开始。

关于html - 垂直对齐文本 Bootstrap 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49534468/