Question

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

我需要那些边框的分隔符更短，文本垂直居中/对齐，但它不能在CSS中工作，这是：

{{1}}

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

有什么建议吗？

更新 - 新图片

lowered height

Answer 1

只需应用行高：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>

Answer 2

拆分“a”和＃menu-item-2506的样式以便更好地控制，并将右边框仅限于“a”，而不是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>

导航项目分隔符 - 太高而不居中

2 个答案: