Question

我有以下代码：我对此代码有一些问题，它与psedo元素的line-height属性有关，请查看代码。

HTML：

<div class="side">
     <nav class="dr-menu">
          <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a></div>
     </nav>
</div>   <!-- end of side -->

CSS代码：

body{
    padding: 0;
    margin: 0;
    background-color: red;
}
.dr-menu {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    position: relative;
    font-size: 1.3em;
    line-height: 2.5;
    font-weight: 400;
    color: #fff;
    padding-top: 2em;
}

.dr-menu > div  {
    cursor: pointer;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.dr-menu > div .dr-icon {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 150%;
    line-height: 1.6em;
    padding: 0 10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-icon {
    color: #60a773;
    left: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

/*critical*/
.dr-icon:before, 
.dr-icon:after {
    position: relative;
    font-family:  FontAwesome;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.dr-menu > div .dr-label {
    padding-left: 3em;
    position: relative;
    display: block;
    color: #60a773;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 2.75;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-label {
    -webkit-transform: translateY(-90%);
    -moz-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%);
}

.dr-menu ul .dr-icon:before {
    margin-right: 15px;
}

.dr-icon-menu:before {
    content: "\f0c9";
}

如果你放大并查看css并检查以下声明

.dr-menu > div .dr-icon

Jsfiddle Jsfiddle

你会看到有一个1.6m的行高，实际上如果你取下行高度属性而是将顶部改为-15px，并且对齐将如前所述完美，那么作者为什么呢？首选行高（响应能力可能与做顶部相比：-15px？）？虽然我知道行高可以用于垂直对齐，但我并不完全理解行高的用法。还是只是在这个例子中应用的一些非常智能的数学我完全失踪？

注意：

代码工作得很好。我的问题是为什么使用line-height属性进行垂直对齐？代码的作者如何知道1.6em究竟会垂直对齐这两个元素？还是应用了一些我完全失踪的精心数学？

垂直对齐绝对定位的元素和伪元素

0 个答案: