центрирование fontawesome компонента со значком faPlay внутри квадратной и круглой кнопки в реакции - PullRequest
Новая
       8

центрирование fontawesome компонента со значком faPlay внутри квадратной и круглой кнопки в реакции

0 голосов
/ 08 июня 2019

В качестве зависимостей я использую реагирование, реакцию-бутстрап, загрузку и fontawesome.

У меня есть компонент fontAwesome внутри кнопки реагирования-загрузки, который имеет text-center в качестве className, любой другой значокЦентрируется точно так же, без проблем, за исключением значка faPlay, который кажется немного смещенным влево.

Я должен добавить, что родительская кнопка - это квадрат с длиной 2em.

здесьэто действие .

вот модуль , который содержит этот компонент в репо.

faPlay не имеет какого-либо особого видаCSS или что-то в этом роде, так что же вызывает не центрирование, а все остальное?

Ответы [ 3 ]

1 голос
/ 08 июня 2019

Добавьте свойство Flexbox CSS для центрирования 

button {
    display: flex;
    justify-content: center;
    align-items: center;
}
0 голосов
/ 09 июня 2019

вот решение в scss. вот как это выглядит . нужна обратная связь, пожалуйста, это просто оптический обман или я прав? 


@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));
}
0 голосов
/ 08 июня 2019

Это оптический illusion.В настоящее время он центрирован horizontally и vertically.

...