Question

我希望垂直对齐li:before内容，而不使用保证金，我已尝试将vertical-align: middle;包含在ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before中，但它不起作用

Bellow是我的代码或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;
}

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

实现垂直对齐

Answer 2

编辑我只是看到你不想使用保证金。好吧，我试过了:)）

这将按照您希望的方式工作，只需将显示设置为内联块并为其提供6px的下限：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;
}

Answer 3

同时在vertical-align: middle;上设置a，并将:before更改为display:inline-block。现在你有两个＆＃34;元素＆＃34;内联块和中间对齐。

vertical-align需要一起工作才能创建对齐。 Block并没有发挥作用。

Answer 4

对于此类需求，还有另一种解决方案，将绝对最高位置设置为50％，将负transformY值设置为-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>

如何垂直对齐中间，为li之前的内容

4 个答案: