时间戳

首页 > 解决方案 > 垂直对齐跨度：相对于文本之后

html - 垂直对齐跨度：相对于文本之后

问题描述

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

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

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

但是，尝试通过使用vertical-align: middle;（以及我可以设法找到的任何其他方式）将其居中会导致此结果（检查它显示文本正确居中于容器上）并且我似乎找不到任何方法来正确获取它居中。

这是小提琴。

标签： htmlsass

解决方案

如果这段代码满足你的需要，你可以试试：

%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;
}

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

推荐阅读