1

Once again, I need your help.

I've got an issue on my project. On my menu, when I select one of it, I want the border to be at the bottom of the menu and the text to be aligned vertically but vertical-align : middle with a display table broke all my menu.

Here's my code :

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

I want it to be responsive and I know that if I put a margin : 0 auto; it will work but the border won't be at bottom of the menu

Thanks for helping !

Anzil khaN
  • 1,974
  • 1
  • 19
  • 30
Bambou
  • 1,005
  • 10
  • 24
  • Take a look at flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ – Guntram Mar 28 '18 at 12:25

2 Answers2

0

Try width : 50% as such it will always start at 50% of the screen.

Pax
  • 65
  • 1
  • 4
  • 19
-1

Replace HTML code with below code : "align-items-center" class is added to parent 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>
Trupti
  • 627
  • 5
  • 9