垂直对齐文本 Bootstrap 4
Align text vertically Bootstrap 4
再一次,我需要你的帮助。
我的项目有问题。在我的 menu 上,当我 select 其中之一时,我希望边框位于 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 代码替换为以下代码:"align-items-center" class 添加到父 div
<div class="row text-center px-3 align-items-center 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>
再一次,我需要你的帮助。
我的项目有问题。在我的 menu 上,当我 select 其中之一时,我希望边框位于 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 代码替换为以下代码:"align-items-center" class 添加到父 div
<div class="row text-center px-3 align-items-center 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>