Div выровнять по центру: Выравниваем блок по центру страницы / Хабр

html — Как выровнять ссылку по центру div

Задать вопрос

Вопрос задан 22 дня назад

Изменён 22 дня назад

Просмотрен 17 раз

В 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>
  <a href="{% url 'institutes_menu' %}">Навчальні заклади</a>
</div>

nav_btn — родительский div, а внутри него ссылка на страницу.

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

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

• html
• css

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

1

Вы можете использовать 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

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

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

0

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Параметры столбца | Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Параметры столбцов

Разработка различных типов макетов столбцов

Вертикальное выравнивание #

Чтобы выровнять столбцы по вертикали, добавьте модификатор is-vcentered в контейнер columns .

Первый столбец

Второй столбец с большим содержанием. Это для того, чтобы вы могли видеть вертикальное выравнивание.

 <дел>
  <дел>
    
Первый столбец