html - Flaticon，将:: before元素定位

我正在使用通过flaticon创建的字体

我的问题是我无法将图标垂直放置在div中

我已经尝试了所有方法，垂直对齐：居中，更改位置：绝对/相对，边距，填充，线高= div的高度，一切！



Flaticon CSS

@font-face {
    font-family: "Flaticon";
    src: url("font/flaticon.eot");
    src: url("font/flaticon.eot#iefix") format("embedded-opentype"),
    url("font/flaticon.woff") format("woff"),
    url("font/flaticon.ttf") format("truetype"),
    url("font/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
font-style: normal;
}

.flaticon-synchronization1:before {
    content: "\e01e";
}

我的CSS

    body{
        background-color: gray;
    }

    #btnTest{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        text-align: center;
    }

    #btnTest > span{

        border: 1px solid red;

    }

    #btnTest > span::before{

        font-size: 30px;
        color: white;
        border: 1px solid yellow;

    }

html

<div id="btnTest"><span class="flaticon-synchronization1"></span></div>

更新，解决方案

    #btnTest{
        width: 100px;
        height: 100px;
        display: table;
    }

    #btnTest > span{

        display: table-cell;
        vertical-align: middle;

    }

    #btnTest > span::before{

        font-size: 30px;
        color: white;
        border: 1px solid yellow;

    }

最佳答案

在这种情况下，您可以这样使用line-height：

#btnTest > span::before{
   line-height:100px; // Equal the height of the parent
}

现在，如果您不知道父母的身高，请尝试以下操作：

#btnTest > span::after {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}