Flaticon，定位:: before元素

Question

我使用的是使用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;

    }

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

Answer 2

另一种解决方案是制作图标position:absolute。现在top和left都应该是50%，但现在图标的左上角位于按钮的中心位置，因此添加transform: translate(-50%,-50%)以使它们成为共同中心。

让父母#buttonTest position:relative。

通过这种方式，我们可以在任何位置放置图标，例如left: 75%, top:50%。

body {
  background-color: gray;
}

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

#btnTest>span {
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

#btnTest>span::before {
  font-size: 30px;
  color: white;
  border: 1px solid yellow;
}

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

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