垂直对齐范围:之后相对于文本

Question

我制作了一个菜单，其中包含带有"列表项目符号"的链接，对悬停做出反应，就像这样。

每个项目都由一个跨度包装，并使用：after创建项目符号。

项目符号垂直对齐到文本的底部，我希望它们居中。

但是，尝试使用vertical-align: middle;(以及我可以找到的任何其他方法(将其居中会导致这种情况(检查它显示文本在容器上正确居中(，我似乎找不到任何方法让它正确居中。

这是小提琴。

Answer 1

你能试试这段代码是否满足你的需要：

%linkBase {  
$fontSize: 40px;
line-height:40px;
font-size: $fontSize;
position:relative;
&::after {
$bulletHeight: $fontSize * 0.8;
content: '';
display: inline-block;
width: 2px;
height: 40px;
background-color: black;
top:50%;
position:absolute;
margin-top:-20px;
}
}
.link {
@extend %linkBase;
}
.linkCentered {
@extend %linkBase;
}

这个想法是将原始链接设置为相对链接，然后将"after"元素设置为绝对定位。然后，您将该元素的"顶部"设置为50%，这会将其向下推一半，然后用其高度一半的边距顶部将其拉回。 这是使项目居中常用的方法。