@dmitriu256

Как отцентрировать иконку посередине кнопки?

Вопрос простой, но как правильно отцентрировать иконку внутри кнопки. Кнопка-переключатель слайдов у slick-slider
<button class="slider-button slider-button__prev feedback-slider__button">
     <i class="fas fa-chevron-left"></i>
   </button>


SASS
.slider-button
  position: absolute
  display: block
  margin: 0 auto
  padding: 0

  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer
  &:hover
    background: $active-color
  &__prev
    left: -30px

Результат
5ebcf06458023919041955.png

Все равно как будто не по середине.

Второй вариант flex!important
position: absolute
  display: flex!important
  align-items: center
  justify-content: center
  padding: 0
  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer


Или оба варианта верны, пора отдохнуть?
  • Вопрос задан
  • 1103 просмотра
Пригласить эксперта
Ответы на вопрос 1
@a-kh
web-разработчик
Размер стрелки идет через font-size: 20px.
Вполне возможно, что откуда-то наследуется высота строки. Поставьте у стрелки высоту строки единицу:
line-height: 1
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы