Question

我正在使用reactjs，react-bootstrap，bootstrap和fontawesome作为依赖项。

我在react-bootstrap按钮中有一个fontAwesome组件，它以text-center作为className，所有其他图标都以相同的方式居中，没有问题，除了faPlay图标最左侧

我应该补充一点，父按钮是一个长度为2em的正方形。

它在action中。

这是在仓库中包含该组件的module。

faPlay没有特殊的CSS或类似的东西，那么是什么原因导致它没有居中，而其他一切却是？

Answer 1

添加Flexbox CSS属性以使其居中

button {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 2

这是光学illusion。当前位于horizontally和vertically的中心。

Answer 3

这是scss中的解决方案。 looks的样子。需要一些反馈，这只是一种视觉幻觉还是对吗？


@function sqrt($r) {
    $x0: 1;
    $x1: $x0;

    @for $i from 1 through 10 {
        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
        $x0: $x1;
    }

    @return $x1;
}

.fa-play-circumcenter svg {
    /* the faPlay icon is centered by the point that meets the (triangle hight)/2 .
    this class centers it by its circumcenter .

    consider that the faPlay icon is an equilateral triangle ,
    horizontally centered (left and right white spaces are equal ) 

    and because of these two rules in the parent button :
    width: 2em;
    height: 2em;

    the width of the button is equal to two times a triangle side .

    you can then calculate the percentage to offset
    the whole svg icon so that the circumcenter of the triangle
    meets the center of the button .*/

    -webkit-transform: translateX(percentage(sqrt(3) / 24));
    -ms-transform: translateX(percentage(sqrt(3) / 24));
    transform: translateX(percentage(sqrt(3) / 24));
}

用faPlay图标将fontawesome组件居中，并在react的方形和圆形按钮内

3 个答案: