如何正确对齐 UL li 元素中的管道与背景图像

Question

/* I have the following CSS. */
.top-header-one {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-one:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-two {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-two:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-three {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-three:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-custom-link ul li {
display: inline-block;
}
.top-custom-link ul li:not(:first-child):before {
content: "|";
}

<!-- And the following HTML. -->
<div class="top-custom-link">
<ul>
<li>
<a href="#"> <span class="top-header-one"> </span></a>
</li>
<li>
<a href="#"> <span class="top-header-two"> </span></a>
</li>
<li>
<a href="#"> <span class="top-header-three"> </span></a>
</li>
</ul>
</div>

我无法将管道与背景图像对齐。

这是jsfiddle https://jsfiddle.net/L7ob2zfp/

Answer 1

将vertical-align: middle;添加到.top-header-one、.top-header-two和.top-header-three会将管道与背景图像对齐。此外，您可以删除<span>之间不必要的空格。有关更改详细信息，请参阅代码段注释。

.top-header-one {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
vertical-align: middle; /* Add vertical-align */
}
.top-header-one:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-two {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
vertical-align: middle; /* Add vertical-align */
}
.top-header-two:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-three {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
vertical-align: middle;  /* Add vertical-align */
}
.top-header-three:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-custom-link ul li {
display: inline-block;
}
.top-custom-link ul li:not(:first-child):before {
content: "|";
}

<div class="top-custom-link">
<ul>
<li><a href="#"><span class="top-header-one"></span></a></li> <!--Remove spaces btw span -->
<li><a href="#"><span class="top-header-two"></span></a></li> <!--Remove spaces btw span -->
<li><a href="#"><span class="top-header-three"></span></a></li> <!--Remove spaces btw span -->
</ul>
</div>

Answer 2

我想你可以试试这个：

将position: relative添加到li，然后为伪类添加 3 个属性

position: absolute;
top: 50%;
transform: translateY(-50%);

片段：

. . .
. . .
.top-custom-link ul li {
display: inline-block;
position: relative;
}
.top-custom-link ul li:not(:first-child):before {
content: "|";
position: absolute;
top: 50%;
transform: translateY(-50%);
}

希望这对:)有所帮助