Flaticon ，定位 ::before 元素答案

【问题标题】：Flaticon , position the ::before elementFlaticon ，定位 ::before 元素
【发布时间】：2014-09-25 12:06:17
【问题描述】：

我正在使用flaticon创建的字体

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

我什么都试过了，vertical-align: middle，改变位置：absolute/relative，margin，padding，line-height = 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: 100px; 添加到#btnTest > span::before
我在 Chrome 控制台中打开了您的示例，只是为了尝试一下，并将“span::before”元素的位置设置为相对，我可以通过调整“top”值来更改位置。这就是你要找的吗？
有趣的是，在我的浏览器中它看起来不像你的图像。事实上，它是完全居中的。
试试这个 - jsfiddle.net/rv264cww
@Mary Melody，您的解决方案有效！

标签： html css

【解决方案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%;
}

【讨论】：

line-height，我知道它有效，但我不知道我的 div 的高度。因此我应该使用类似 line-height = height of the div 的东西，但我不能使用 css
@WhiteLine 检查答案的补充

【解决方案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";
}

&lt;div id="btnTest"&gt;&lt;span class="flaticon-synchronization1"&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：