0

В HTML и CSS я человек новый, и потому возник такой вот вопрос. Хочу сделать что-то на подобии кнопки для навигации. Кнопка должна быть, в сути, div-ом, внутри которого находится ссылка. Пока имею такую ситуацию:

.nav_btn
{
    float: left;
    display: block;
    background-color: white;

    width: 200px;
    height: 100px;

    border-radius: 10px;
    text-align: center;
}

.nav_btn a
{
    text-decoration: none;
}
<div class="nav_btn">
  <a href="{% url 'institutes_menu' %}">Навчальні заклади</a>
</div>

nav_btn - родительский div, а внутри него ссылка на страницу. По-идее, ссылка должна располагаться по центру div-а, для чего в css для nav_btn было указанно свойство text-align: center. Вроде как, должно было бы сработать, но нет:

Центрирование не сработало

Подскажите пожалуйста, что я сделала не так, или что упустила.

3 ответа 3

1
.nav_btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
1
0

Вы можете использовать Flexbox:


  .nav_btn {
    /* ******* */
    display: flex;
    justify-content: center;
    align-items: center;
    /* ******* */
    float: left;
    background-color: white;

    width: 200px;
    height: 100px;

    border-radius: 10px;
    text-align: center;
  }

  .nav_btn a {
    text-decoration: none;
  }

1
0

Решение нашла такое:

.nav_btn a
{
    text-decoration: none;
    height: 6em;
    line-height: 6em;
}

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.