Flaticon，将：：before元素定位

Question

我在用flaticon创建的字体

我的问题是我不能将图标垂直放置在div中

我试过所有的东西，垂直-对齐：中间，改变位置：绝对/相对，边距，填充，线-高度=div的高度，所有的东西！

@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";
}

    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;

    }

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

    }

Answer 1

在这种情况下，您可以使用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%;
}