html - 导航元素分隔符 - 太高不居中

Question

我必须在导航菜单上做一些工作，除了分隔符之外一切都很好。现在，它们看起来像这样:

screenshot

我需要那些作为边框的分隔符更短，文本垂直居中/对齐，但它在 CSS 中不起作用，即:

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

这是其中一项，但除最后一个子项外，所有项的代码都相同。

有什么建议吗？

更新 - 新图像

lowered height

Answer 1

只需应用 line-height: 45px;如果你知道你的元素是 45px 高度。如果您不必支持旧版浏览器，我会强烈建议使用 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>