Я использую значок плюса (отличный шрифт), и он неправильно центрирован в синем круге для разных браузеров (Chrome версии 69.0.3497.92, Firefox 62 и Safari 11.1.2).

Это беспокоит меня некоторое время, и я не могу понять, в чем проблема. Кажется, что он также смещается при увеличении и уменьшении масштаба (команда + плюс или минус)

Любая информация будет полезна!

Codepen: https://codepen.io/anev-prud/pen/oPQzXJ

Спасибо!

Другие вещи, чтобы отметить:

  • Я использую гибкую коробку для центрирования вещей (вертикально и / или горизонтально)

  • Использование классов начальной загрузки

=======================

Код из Codepen

Html

<div class="container mt-5">
  <div class="row">
    <!-- button 1 -->
    <div class="col-md-4 mb-5 d-flex flex-column align-items-center">
        <h3>button 1</h3>
        <button class="btn btn-link btn-3 p-0 d-flex flex-column align-items-center">
            <div class="addToFav d-block mb-2">
                <i class="fa fa-plus"></i>
            </div>
            <div class="fav-text d-block">
                Favorites
            </div>
        </button>
    </div>
    <!-- button 2 -->
    <div class="col-md-4 mb-5 text-center d-flex flex-column align-items-center">
        <h3>button 2</h3>
        <button class="btn btn-link btn-3 p-0 d-flex flex-row align-items-center">
            <div class="addToFav d-inline-block">
                <i class="fa fa-plus"></i>
            </div>
            <div class="fav-text d-inline-block ml-2">
                Favorites
            </div>
        </button>
    </div>
  </div>
</div>

Css

// main css
.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    .fa {
        padding: 0.2em 0.71em;
        background: blue;
        border-radius: 50rem;
        display: inline;
        // font-size: 50px;
        &::before {
            position: absolute;
            opacity: 1;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}
// on hover, remove underline under + icon
.btn:hover {
  text-decoration: none;
}
.btn:hover .fav-text {
  text-decoration: underline;
}
1
user2428993 18 Сен 2018 в 17:13

2 ответа

Лучший ответ

Если решение Андрея не работает, потому что вам нужно изменить только размер шрифта, попробуйте использовать значения em для ширины и высоты:

.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    background: blue;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    border-radius: .6em;
}

В этом примере вам все равно не понадобятся селекторы .addToFav .fa или .addToFav .fa::before, но вы можете изменить размер шрифта, и получившийся символ будет масштабироваться


РЕДАКТИРОВАТЬ: В качестве альтернативы вы можете использовать вместо этого значок FontAwesome .fa-plus-circle: Замените значок .fa-plus, удалите селекторы .addToFav .fa и .addToFav .fa::before и используйте следующий CSS:

.addToFav {
    line-height: 1;
    font-size: 1.4em;
    color: blue;
}

Вот ручка с fa-plus-circle: https://codepen.io/anon/pen/NLEXqN

0
Alexander Rice 18 Сен 2018 в 18:11

Попробуйте это быстрое исправление, если значок имеет фиксированный размер, этот CSS будет работать:

.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: blue;
    border-radius: 50rem;
}

Вам не нужны стили: before css и .fa css, только этот код сделает всю работу :)

0
Andrej 18 Сен 2018 в 14:39