Align menu items vertically

I am having the hardest time trying to align menu items vertically. I’ve tried using flexbox. I can get the menu items to be equal heights but that stubborn menu item text will not move.

vertical-align

Here’s the base CSS I have for the menu (felxbox removed)

@import url('https://fonts.googleapis.com/css?family=Raleway');

body {
  background-color: #0A4972;
}

.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
}

@media (min-width:768px) {
  .navbar-nav>li {
    color: white;
  }
}

.navbar-default .navbar-nav>li>a {
  color: #fff;
}

.navbar-default .navbar-nav>li>a:hover {
  color: #ECEC1E;
  background-color: rgba(255, 255, 255, 0);
}

.dropdown-menu {
  background-color: white;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  color: #ECEC1E;
}

.dropdown-menu>li>a {
  color: #ECEC1E;
}

.dropdown-menu>li>a:hover {
  color: #ECEC1E;
  background-color: rgba(255, 255, 255, 0);
}

Do you have an annotated screen shot that shows the problem and the outcome you’re trying to achieve?

@richUK

I want to distribute the menu items, in this case an image and a text link, along the center axis. Centering the items vertically.

image

Not sure where the tags need to go exactly, but think you need to user vertical-align:middle; against the elements you want aligned that way within the div somewhere.

That was the first thing I tried actually. Maybe I wasn’t targeting the right element but I tried pretty much everything I can think of. The row, the page_element, the menu, etc.

From @Chem

The solution requires line-height: to be defined.

.nav .item a{
height: 100px;
line-height: 66.66px;
}
2 Likes