Как поместить текст в центр кнопки

Question

Я пытаюсь создать кнопку CSS в левом верхнем углу, чтобы вернуться на предыдущую страницу. Однако у меня проблемы с центрированием текста прямо посередине, или в этом случае стрелкой посередине. Я пробовал все виды вещей, но я не могу понять это. Если бы кто-нибудь мог помочь, это бы мне очень помогло.

.goback {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-size: 60px;
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: #0077be;
  color: #ffffff;
}

<button class="goback">&#8249;</button>

Answer 1

.goback {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-size: 60px;
  display: table-cell;
  vertical-align: middle;
  line-height: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: #0077be;
  color: #ffffff;
  padding-bottom: .2em;
}

<button class="goback">&#8249;</button>

Так что лучшим решением для вас в вашем случае будет добавление padding-bottom; Это произошло потому, что этот символ не имеет height = line-height, у него есть такие параметры, как символ в нижнем регистре (и для каждого шрифта он может быть разным), и если вы хотите использовать это решение - вы должны убедиться, что для всех платформ ваш шрифт будет работать правильно (иногда один шрифт имеет различный рендеринг на macOS и windows)

, когда я делаю подобное, я использую для этого SVG-иконки (точный SVG-спрайт), здесь вы можете увидеть реализацию с псевдоклассом и svg ( фон в base64)

https://jsfiddle.net/csscoder/uj1hqv4o/10/

Answer 2

Я рекомендую вам просто добавить нижний отступ = 0 и line-height = 0, значок будет выровнен по центру

.goback {
   padding: 0px 0px 5px 0px;
   line-height: 0;
}

это поможет вам

Answer 3

Несколько предложений, вы должны изменить height и width на 85px, если это не проблема.

Я нашел причину, по которой он не попал в центр, потому что font-size и height and width противоречили друг другу. Я попытался исправить проблему, выровняв ее.

Если вы хотите, чтобы высота и ширина были 80px, вам нужно уменьшить font-size и использовать функцию padding.

ОБНОВЛЕНИЕ:

CSS фрагмент

.goback {
   position:absolute;
   top: 20px;
   left: 20px;
   font-size: 65px;  
   width: 85px;
   height: 85px;
   border-radius: 50%;  
   background: #0077be;
   color: #ffffff;   
   border:none;
   padding:0px 5px 20px 0px;   
 }

Answer 4

Также я рекомендую вам не использовать фиксированную высоту или ширину, вместо этого вы должны использовать отступы: 10px 30px; (пример значения), если у вас будет более длинный текст, он будет автоматически корректироваться.