如何垂直（中间位置）对齐 LI 元素的伪元素“之前”答案

【问题标题】：How to vertically (middle position) align pseudo-element 'before' for LI element如何垂直（中间位置）对齐 LI 元素的伪元素“之前”
【发布时间】：2015-04-16 00:49:26
【问题描述】：

我想垂直对齐伪元素li:before，不使用边距，我尝试在ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before 中包含vertical-align: middle;，但它不起作用。

下面是我的代码或JSFiddle here:

.nav-menu-list>li>a {
    font-family: 'Pribambas', Helvetica, Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
}

ul.nav-menu-list li a {
    border-bottom: none;
    padding-left: 60px;
    color: #fff;
}

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '-';
    display: block;
    width: 15px;
    height: 3px;
    background-color: #fff;
    clear: both;
    vertical-align: middle;
}

ul.nav-menu-list li a:hover, ul.nav-menu-list li a:focus {
    background-color: transparent;
    color: #a2a2a2;
}

【问题讨论】：

当然不行，因为vertical-align不适用于block元素。
这似乎是 :before/:after 伪元素垂直居中内容的最佳答案：stackoverflow.com/a/14524161/470749

标签： html css

【解决方案1】：

我会用

 .nav-menu-list>li {
     position: relative;
 }
 ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
     position: absolute;
     top: 50%;
     margin-top: -3px;
 }

实现垂直对齐

【讨论】：

【解决方案2】：

编辑我只是看到你不想使用边距。好吧，我试过了:)

这将按您的意愿工作，只需将 display 设置为 inline-block 并给它一个 6px 的 margin-bottom：http://jsfiddle.net/bayxxey3/8/

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 3px;
    background-color: #000;
    clear: both;
    margin-bottom:6px;
}

【讨论】：

对不起，我的 CSS 有点错误，content ''; 必须是像这里 link 这样的块，但行高不起作用
另一种方法是使用 background-image 而不是 content link 类 ul.nav-menu-list li:hover, .nav-menu-list li:focus 但我不喜欢这种方式，但我正在努力让它工作，哈哈
@ValeriCrudu 我做了一个新的小提琴。如果您不想拥有任何内容，则必须将before 视为一个元素。

【解决方案3】：

在a 上也设置vertical-align: middle;，并将:before 更改为display:inline-block。现在你有两个“元素”，既是内联块又是中间对齐。

vertical-align 需要元素协同工作来创建对齐。 Block 不配合。

【讨论】：

【解决方案4】：

对于这种需要还有另一种解决方案，即使用绝对顶部位置设置为 50% 并将负 translateY 值设置为 -50%。父元素必须有一个相对位置。解释here。

请查看问题中修改后的 CSS 代码，请注意您不需要 clear: both 或 line-height: 28px

ul {
    list-style-type: none;
}

.nav-menu-list>li>a {
    font-family: 'Pribambas', Helvetica, Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
}

ul.nav-menu-list li a {
    border-bottom: none;
    padding-left: 60px;
    color: #000;
}

ul.nav-menu-list li {
    position: relative;  
}

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: block;
    width: 15px;
    height: 3px;
    background-color: #000;
    /* clear: both; */
    /* line-height: 28px; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

ul.nav-menu-list li a:hover, ul.nav-menu-list li a:focus {
    background-color: transparent;
    color: #a2a2a2;
}

      <ul class="nav-menu-list">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>

【讨论】：