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

.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 {
  display: flex;
  justify-content: center;
  align-items: center;
}

  .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;
  }

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

 *{
заполнение: авто;
поля:авто;
выравнивание текста: по центру;
}
 

 
<голова>


<тип стиля="текст/CSS">
*{
заполнение: авто;
поля:авто;
выравнивание текста: по центру;
}


<тело>
<дел>
Это основной контейнер.

...
<тело>
    <дел>
        Это основной контейнер.
    

Затем вы можете центрировать #content div, используя:

 #content {
    ширина: 400 пикселей;
    поле: 0 авто;
    цвет фона: #66ffff;
}
 

Не знаю, что вы видели в других местах, но это путь. * {маржа: 0; заполнение: 0; } Фрагмент , который вы видели, предназначен для сброса определений браузера по умолчанию для всех браузеров, чтобы ваш сайт вел себя одинаково во всех браузерах, это не имеет ничего общего с центрированием основного контейнера.

Большинство браузеров применяют поля и отступы по умолчанию для некоторых элементов, которые обычно не согласуются с реализациями других браузеров. Вот почему часто считается разумным использовать этот вид «сброса». Фрагмент сброса, который вы представили, является самой простой из таблиц стилей сброса, вы можете прочитать больше об этом здесь:

• http://meyerweb.com/eric/tools/css/reset/

2

Основной принцип выравнивания страницы по центру состоит в том, чтобы иметь тело CSS и CSS main_container. Это должно выглядеть примерно так:

 body {
     маржа: 0;
     заполнение: 0;
     выравнивание текста: по центру;
}
#main_container {
     поле: 0 авто;
     выравнивание текста: по левому краю;
}
 

Вы можете выравнивать текст: центрировать тело, чтобы центрировать контейнер. Затем text-align: оставил контейнер, чтобы получить весь текст и т. д., чтобы выровнять по левому краю.

1

Я бы опустил объявление * { text-align:center } , так как оно устанавливает выравнивание по центру для всех элементов.

Обычно с контейнером фиксированной ширины margin: 0 auto должно быть достаточно

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как центрировать в CSS с помощью CSS Grid

Используя CSS Grid, мы можем размещать содержимое в двумерной сетке со столбцами и строками. Сетка CSS — это фантастический API CSS для размещения контента в Интернете. Часто нам нужно центрировать контент на странице или в контейнере. Мы можем сделать это разными способами в CSS. В предыдущем посте мы узнали, как центрировать с помощью Flexbox; в этом посте мы узнаем, как центрировать контент с помощью CSS Grid.

В нашем примере у нас есть два элемента: родительский элемент и дочерний элемент. Мы хотим центрировать дочерний элемент в пределах ширины контейнера родительского элемента.

 раздел { 
 ширина: 200 пикселей; 
 граница: 1px сплошная #2d2d2d; 
 } 
 div { 
 цвет: #fff; 
 фон: #2d2d2d; 
 отступ: 12px; дисплей 
: встроенный блок; 
 } 
 

Чтобы центрировать наш элемент, нам нужно установить родительский элемент для отображения в виде сетки CSS.

 раздел { 
 ширина: 200 пикселей; 
 граница: 1px сплошная #2d2d2d; 
 дисплей: сетка; 
 выравнивание содержимого: по центру; 
 } 

Во-первых, мы устанавливаем для раздела значение дисплей: сетка . Это свойство CSS задает отображение элемента с использованием CSS Grid. Теперь каждый прямой дочерний элемент будет элементом сетки, помещенным в столбец. Чтобы выровнять элемент по горизонтали внутри сетки, мы используем свойство justify-content и устанавливаем для него значение center .

С помощью justify-content мы можем выровнять столбцы start , end , stretch или center .

Центрирование по вертикали

Теперь, когда элемент центрирован по горизонтали, мы можем центрировать элемент по вертикали. Давайте увеличим высоту нашего родительского контейнера до 200 пикселей.

Подобно Flexbox, столбцы сетки заполняют пространство, где они определены. Чтобы центрировать элемент по вертикали, мы устанавливаем align-content: center; .

 раздел { 
 дисплей: сетка; 
 выравнивание содержимого: по центру; 
 выравнивание содержимого: по центру; 
 } 

Чтобы центрировать несколько элементов, нам нужно добавить еще пару свойств CSS к родительскому элементу сетки.

 <раздел> 
 
1
 
 
2
 
 
3
 
  

 section { 
 display: grid; 
 выравнивание содержимого: по центру; 
 выравнивание содержимого: по центру; 
 зазор: 4 пикселя; 
 grid-auto-flow: столбец; 
 } 
 

Первое свойство gap позволяет нам определить пространство между элементами сетки. Второе свойство grid-auto-flow позволит нам определить направление, в котором мы хотим размещать элементы, например, слева направо или вертикально в виде рядов.

При использовании justify-content и align-content мы выравниваем столбцы относительно родительского контейнера Grid. В нашем следующем примере мы увидим, как мы можем выравнивать элементы относительно столбца, а не родительского контейнера сетки.

Центрирование элементов в столбце CSS Grid

CSS Grid — очень мощное средство, позволяющее нам превосходно контролировать зернистость наших макетов.