CODEWITHSUNDEEP
htmlcssalignmentborder
Hunter
Hunter

Reputation: 39

Nav item separators - too tall not centered

I have to do some work on a nav menu and everything is good except the separators. Right now, they look like this:

screenshot

I need those separators, which are borders, to be shorter and the text vertical centered/aligned but it's not working in CSS, which is:

#menu-item-2506 a{
font-size:10px;
border-right: 2px solid #000000;
height:45px;
padding-right:5px;
letter-spacing:2px;
vertical-align: center;
}

That's one of the items, but the code is the same for all, except the last child.

Any suggestions?

UPDATE - new image

lowered height

Upvotes: 1

Views: 50

Answers (2)

b2ok
b2ok

Reputation: 536

Split style of "a" and #menu-item-2506 for better control and give right border only to "a", not div.

<style>
#menu-item-2506 {
font-size:10px;
height:45px;
padding-right:5px;
letter-spacing:2px;
vertical-align: center;
}

a {
font-size:10px;
padding-right:5px;
letter-spacing:2px;
border-right: 2px solid #000000;
vertical-align: center;
}


</style>

<div id="menu-item-2506">
<a href="#">Top</a>
</div>

Upvotes: 0

Mik
Mik

Reputation: 124

Just apply line-height: 45px; if you know that your element is 45px height. If you don't have to support older browsers, I would strongly suggest different approach with FLEX.

#menu-item-2506{ /* ignore me, just basic improvisation. */
  position: relative;
  display: inline-block;
  width: auto;
  height: 45px;
  background: #1d1d1d;
}
#menu-item-2506 a{
  line-height: 45px; /* USE THIS AND YOU'RE FINE IF YOU KNOW YOUR ELEMENT HEIGHT */
  font-size:10px;
  border-right: 2px solid #000000;
  height:45px;
  padding-right:5px;
  letter-spacing:2px;
  vertical-align: center;
  color: white;
}
<div id="menu-item-2506">
  <a href="#Bled_Slovenija">Bled Slovenija</a>
</div>

Upvotes: 1

Related Questions