Мой текст не центрируется внутри контейнера li - PullRequest
Новая
       7

Мой текст не центрируется внутри контейнера li

1 голос
/ 10 мая 2019

Я рву волосы, пытаясь отцентрировать текст прямо по центру контейнера li.Кажется, что он центрирован слева направо.Но сверху вниз это не так.

Я пытался добавить к тексту интервал и переместить его через поля и отступы.Мне вообще не удалось переместить текст.

Я ожидаю, что текст будет отцентрирован по горизонтали и вертикали прямо в центре синей рамки.Прямо сейчас текст центрирован слева направо, но не по центру сверху вниз. 

<html>

<style>
.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
}

.follow-button:hover {
    cursor: pointer;
    bacgkround: #0059D0;
    border-color: #0059D0;
  }

#follow-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
</style>

<ul id="follow-button-nav">
    <li class="follow-button">Follow</li>
 </ul>

</html>```

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

В основном вы можете сделать это: 

.follow-button {
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

.follow-button:hover {
    cursor: pointer;
    background: #0059D0;
    border-color: #0059D0;
  }

#follow-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
<ul id="follow-button-nav">
    <li class="follow-button">Follow</li>
</ul>
0 голосов
/ 10 мая 2019

Вы не можете центрировать высоту текста, за исключением:

  • Вы выполняете настройку с верхним и нижним отступом
  • Делаете div внутри td и меняете вертикальное выравнивание по центру

думали, что они много раздумывают над этой проблемой, вам следует поискать больше.Это 2019

Редактировать:

И я забыл о высоте линии.Хотя это не рекомендуется.Вы можете просто добавить CSS высоты строки на кнопку.

.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height:40px;
}

Вот скрипка JSFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...