Question

我制作了一个菜单，其中包含带有“列出项目符号”的链接，对悬停做出了反应，例如this。

每个项目都用 span 包裹，并使用：after 创建项目符号。

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

但是，尝试使用vertical-align: middle;（以及我可以设法找到的任何其他方式）使其居中，结果是this（检查它是否显示文本正确地位于容器的中心），我似乎找不到任何方法来使其正确居中。

Here是小提琴。

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％，将其向下推一半，然后将其向上拉回一半高度的边距顶部。这是将项目居中的常见方法。

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

1 个答案: