Блок div по центру страницы: Как выровнять слой по центру веб-страницы?

Содержание

Варианты горизонтального выравнивания блоков и картинок по центру справа слева


Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.

Как выравнять картинку по горизонтали: справа, слева, по центру?

Коротко.

Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.


Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.

В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
— Float;
— Inline-block;
— Table-cell (устаревший после выхода HTML5).

Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.

Вариант с использованием Float

Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.

Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

<div>Выравниваем</div>
<div>блоки</div>
<div>в один ряд</div>
<div>по горизонтали</div>

Значения стиля в файле CSS:
.block {
     float: left; /* обтекание */
     line-height: 60px; /* Высота строки и центровка по вертикали  */
	 width: 180px; /* ширина блока */
     text-align: center; /* текст по центру */
	 font-size: 22px;
     background: #5F4BE3;
     color: white;
     margin-top: 60px;
     margin-right: 10px;    
    }

Получает результат, который вы видите на картинках ниже.

При отсутствии float: left;

С размещенным float: left;

При уменьшении экрана, когда блоки благодаря своему размеру width: 180px; перестанут умещаться в одну линию, они начнут складываться друг под друга.

Этот же пример с использованием float: right;


Как видите блоки (судя по тексту в них) поменяли порядок размещения. Браузер обработал их сверху вниз и выровнял по правому краю, соблюдая очерёдность — сначала выравнял первый, потом второй и т.д. При работе со свойством float: right; имейте это ввиду.

Для прерывания действия свойства обтекания элементов используется конструкция:

<div></div>
без содержимого.

В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.

В этом случае поступаем так:

HTML код:

<div> <!-- Создаем дополнительный родительский блок -->
            <div>Выравниваем</div>
            <div>блоки</div>
            <div>в один ряд</div>
            <div>по горизонтали</div>
</div>

CSS код:
.content {
         width: 750px; /* фиксируем ширину родительского блока */
         margin: 0 auto; /* центрируем родительский блок */
         background: #FFFFCC;
         height: 60px; /* Высота родителя */
        }
 
.block {
        float: left; /* Задаем обтекание */
        line-height: 60px;/* Высота строки и центровка по вертикали */
        width: 180px; /* ширина блока */
        text-align: center; /* текст по центру */		
        font-size: 22px;
        background: #5F4BE3;
        color: white;
        margin-right: 10px;
}
.content :last-child {
        margin-right: 0px; /* Убираем последнее правое поле* /
}

Результат:

На практике могут встретиться различные ситуации, но всех особенностей в одной статье не рассмотреть.

Метод «Inline-block»

Как уже говорилось, блочные и строчные элементы имеют свои недостатки и преимущества в зависимости от поставленной задачи. Возьмём только преимущества и попробуем их объединить. Для этого знакомимся со свойством display: inline-block.

Свойство display: inline-block создаёт блочно-строчный элемент, который можно расценивать как строчный, с сохранением блочных свойств. Он позволяет изменять линейные параметры, задавая отступы, поля и т.п.

Свойства блочно-строчного элемента:
— ширина и высота блока определяется автоматически, в зависимости от содержимого и присутствия отступов padding.
— ширину и высоту блока можно задать фиксировано.
— эффект свёртывания границ отсутствует.

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

HTML:

<div>
        <div>
            <p><img src="img/menu1.png" alt=""  /></p>
            <p><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div>
            <p><img src="img/menu2.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 2</a></p>
        </div>
        <div>
            <p><img src="img/menu1.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 3</a></p>
        </div>
        <div>
            <p><img src="img/menu2.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 4</a></p>
        </div>
</div>

CSS:
.content2 {
         width: 750px; /* фиксируем ширину родительского блока. Если задать 100%, то будут складываться при сужении экрана */
         margin: 0 auto; /* центрируем родительский блок */
         height: 60px; /* Высота родителя */
        }
. menu {
	display: inline-block;  /* блочно-строчное отображение */
  	width: 120px; /* ширина отдельного блока */
	vertical-align: top; /* текст меню выравниваем по верху */
        }
 
        .string a{
         text-align: center; /* текст по гориз. центру */
		 background: #5F4BE3;
		 color: white;
		 text-decoration: none;
		 padding: 3px;
        }

В результате получили следующее:

Напоминаю: перед тем как работать с выравниваем картинки по горизонтали, её необходимо поместить в блок DIV.

Скачайте пример страницы с указанными выше HTML CSS кодами для практических экспериментов — скачать: Example_Horizontal_Alignment.rar [15,36 Kb] (cкачиваний: 14)

Как выравнять по центру блок переменной ширины.

Вы здесь: Главная — CSS — CSS Основы — Как выравнять по центру блок переменной ширины.

Всем привет! В этой статье я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически.

Мы уже знаем, как выравнять элемент, ширина которого нам известна. Нужно просто добавить

margin: 0 auto; Однако если мы не знаем ширину элемента, его свойство width, соответственно, будет отсутствовать, и этот способ уже, увы, не сработает. Как поступать в таких случаях? Давайте узнаем.

Хорошим примером будет блок постраничной навигации. Он может содержать в себе ссылки на 3 страницы, 10 страниц и т.д. Мы не можем задать ему какую-то одну ширину. Давайте сверстаем такой блок.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
</head>
<body>
  <div>
   <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
   </ul>
  </div>
</body>
</html>

Теперь зададим стили.

#pagination ul {
  margin: 0 auto;
  overflow: hidden;
  display: table;
}

#pagination ul li {
  float: left;
  border: 1px solid #ccc;
  padding: 5px 8px;
  margin-right: 3px;
}

Т.е. все, что вам нужно сделать, это добавить блоку display: table; Почему это работает? Как вы знаете, таблицы не занимают 100% ширину, их ширина вычисляется в зависимости от контента, поэтому браузер будет ужимать блок до тех размеров, которые нужны контенту, и, таким образом, он будет знать его ширину и сможет выравнять блок по центру через обычный margin: 0 auto;

Спасибо за внимание.

  • Создано 27.01.2015 19:00:00
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov. ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Bootstrap 4 по центру вертикального и горизонтального выравнивания

Обновление 2019 Bootstrap 4.3.1

Там нет необходимости для дополнительного CSS . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (ы) формы в полный рост

. Bootstrap 4 теперь имеет h-100класс для 100% роста …

Вертикальный центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

высота контейнера с пунктом (пунктами) по центру должна составлять 100% (или независимо от желаемой высоты относительно центрального элемента)

Примечание. При использовании height:100%( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах height:100vh;вместо %получения желаемой высоты могут использоваться единицы vh .

Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.


Горизонтальный центр:

  • text-centerцентрировать display:inlineэлементы и содержимое столбца
  • mx-auto для центрирования внутри гибких элементов
  • offset-*или mx-autoможет быть использован для центрирования столбцов ( . col-)
  • justify-content-centerв колонках центра ( col-*) внутриrow

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану

Комбинаторы CSS


Комбинаторы CSS

Комбинатор — это то, что объясняет взаимосвязь между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простым селекторы, мы можем включить комбинатор.

В CSS есть четыре разных комбинатора:

  • Селектор потомков (пробел)
  • дочерний селектор (>)
  • Селектор соседних братьев (+)
  • общий родственный селектор (~)

Селектор потомков

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.

В следующем примере выбираются все элементы

внутри элементов

:


Селектор детей (>)

Дочерний селектор выбирает все элементы, которые являются дочерними элементами указанный элемент.

В следующем примере выбираются все элементы

, которые дочерние элементы

элемент:



Селектор соседних братьев и сестер (+)

Смежный селектор соседнего уровня используется для выбора элемента, который непосредственно после другого конкретного элемента.

Родственные элементы должны иметь один и тот же родительский элемент, и «смежный» означает «сразу после».

В следующем примере выбирается первый элемент

, который помещается сразу после элементов

:


Общий селектор братьев и сестер (~)

Общий селектор одноуровневого элемента выбирает все элементы, которые являются одноуровневыми элементами указанного элемента.

В следующем примере выбираются все элементы

, которые являются родственниками элементов

:


Проверьте себя упражнениями!


Все селекторы комбинаторов CSS

Селектор Пример Описание примера
элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает первый элемент

, который помещается сразу после элементов

элемент1 ~ элемент2 полоса Выбирает каждый элемент
    , которому предшествует элемент



Центрирование в CSS: полное руководство

Иногда строчные / текстовые элементы могут отображаться вертикально по центру только потому, что над и под ними есть равные отступы.

  .link {
  padding-top: 30 пикселей;
  padding-bottom: 30 пикселей;
}  

См. Перо с вертикальным центрированием текста Криса Койера (@chriscoyier) на CodePen.

Если заполнение по какой-то причине не подходит, и вы пытаетесь центрировать какой-то текст, который, как вы знаете, не будет переноситься, есть уловка: сделать line-height равным высоте center text .

  .center-text-trick {
  высота: 100 пикселей;
  высота строки: 100 пикселей;
  белое пространство: nowrap;
}  

См. Pen Centering a line with line-height, автор Chris Coyier (@chriscoyier) на CodePen.

Равное заполнение сверху и снизу может дать эффект центрирования и для нескольких строк текста, но если это не сработает, возможно, элемент, в котором находится текст, может быть ячейкой таблицы, буквально или заставленной вести себя как одна с CSS. В этом случае свойство vertical-align обрабатывает это, в отличие от того, что обычно делает, когда обрабатывает выравнивание элементов, выровненных по строке. (Подробнее об этом.)

См. Текст «Центрирование пера» (вроде) с помощью Padding Криса Койера (@chriscoyier) на CodePen.

Если что-то похожее на таблицу отсутствует, возможно, вы могли бы использовать flexbox? Один гибкий дочерний элемент может быть довольно легко центрирован в гибком родительском элементе.

  .flex-center-вертикально {
  дисплей: гибкий;
  justify-content: center;
  flex-direction: столбец;
  высота: 400 пикселей;
}  

См. Перо с вертикальным центром в нескольких строках текста с помощью Flexbox от Криса Койера (@chriscoyier) на CodePen.

Помните, что это действительно важно, только если родительский контейнер имеет фиксированную высоту (px,% и т. Д.), Поэтому контейнер здесь имеет высоту.

Если оба этих метода отсутствуют, вы можете использовать технику «призрачного элемента», при которой псевдоэлемент во всю высоту помещается внутри контейнера, а текст выравнивается по вертикали.

  .ghost-center {
  положение: относительное;
}
.ghost-center :: before {
  содержание: " ";
  дисплей: встроенный блок;
  высота: 100%;
  ширина: 1%;
  вертикальное выравнивание: по центру;
}
.ghost-center p {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}  

См. Многострочный текст Pen Ghost Centering от Криса Койера (@chriscoyier) на CodePen.

Как горизонтально центрировать элемент в другом

  1. Фрагменты
  2. CSS
  3. Как горизонтально центрировать
    в другом

Тег

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

Если вы хотите поместить элемент

в центр другого
, используйте стили CSS, чтобы расположить его точно в центре другого
по горизонтали.Следуйте инструкциям ниже и получите фрагмент кода.

Создать HTML¶

  • Создайте два элемента
    с атрибутами id с именами «outer-div» и «inner-div». Поместите второй
    в первый.
  
Я горизонтально центрированный div.

Добавить CSS¶

  • Установить ширину внешнего элемента (т. е. 100% покрывает всю строку). Измените его в соответствии с вашими требованиями.
  • Установите для свойства поля значение «auto», чтобы горизонтально центрировать элемент
    на странице. «Маржа: 0 авто» выполняет фактическое центрирование.
  • Установите предпочтительные цвета для внешнего и внутреннего элементов
    с помощью свойства background-color.
  • Используйте значение «inline-block» свойства display, чтобы отобразить внутренний
    как встроенный элемент, а также как блок.
  • Задайте свойство text-align для внешнего элемента
    , чтобы центрировать внутренний.Это свойство работает только со встроенными элементами.
  # outer-div {
  ширина: 100%;
  выравнивание текста: центр;
  цвет фона: # 0666a3
}

# inner-div {
  дисплей: встроенный блок;
  маржа: 0 авто;
  отступ: 3 пикселя;
  цвет фона: # 8ebf42
}  

Вот полный код.

Пример горизонтального центрирования элемента

внутри другого с помощью свойства text-align: ¶
  

  
    <стиль>
      # outer-div {
        ширина: 100%;
        выравнивание текста: центр;
        цвет фона: # 0666a3
      }
      # inner-div {
        дисплей: встроенный блок;
        маржа: 0 авто;
        отступ: 3 пикселя;
        цвет фона: # 8ebf42
      }
    
  
  
    
Я горизонтально центрированный div.
Попробуйте сами »

Результат

Я горизонтально центрированный div.

Установите также отступы для создания пространства вокруг внутреннего элемента.

Пример горизонтального центрирования элемента

внутри другого с помощью свойства display: ¶
  

  
    <стиль>
      # main-container {
        дисплей: гибкий;
        ширина: 100%;
        justify-content: center;
        цвет фона: # 0666a3;
      }
      # main-container div {
        цвет фона: # 8ebf42;
        отступ: 10 пикселей;
      }
    
  
  
    
Я горизонтально центрированный div со свойством отображения CSS.
Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Центрирующие элементы с гибким боксом | Webflow University

Благодаря суперспособностям макета flexbox вы можете идеально выровнять и выровнять свои HTML-элементы в центре его родительского элемента.

В этом видео используется старый интерфейс.Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

Вертикальное центрирование элементов всегда было проблемой в веб-дизайне, пока на сцене не появился flexbox. С помощью flexbox легко центрировать элементы по вертикали в их родительском элементе.

В этом уроке:

  1. Центрировать отдельные элементы
  2. Центрировать несколько элементов

Во всех этих примерах для родительского элемента задана высота 100vh, что составляет 100% от высоты области просмотра.

Узнайте, как использовать все свойства flexbox.

Центрировать одиночный элемент

Чтобы центрировать один элемент в середине секции как по вертикали, так и по горизонтали:

  1. Добавьте желаемый элемент в секцию
  2. Выберите секцию
  3. Установите настройку дисплея на flex in панель стиля
  4. Установите гибкую компоновку на выровнять: по центру и выровнять: по центру

Этот процесс аналогичен тому, когда вы хотите центрировать один элемент, содержащий несколько элементов.Например, если вы хотите вертикально центрировать контейнер, в котором хранится много контента. Установите родительский элемент на гибкость, затем выровняйте по ширине и отцентрируйте.

Центрировать несколько элементов

Вы также можете центрировать несколько элементов. Например, если у вас есть 2 карточки, и все они должны быть уложены и выровнены по центру по горизонтали, а затем по центру по вертикали, вы можете использовать flexbox:

  1. Добавить все элементы в элемент раздела
  2. Выбрать элемент раздела
  3. В Панель стилей установите для параметра отображения значение flex
  4. Установите значение Vertical Direction
  5. Установите выравнивание: по центру и выровняйте: по центру

Попробуйте Webflow — это бесплатно

В этом видео используется старый интерфейс .Скоро выйдет обновленная версия!

Пять способов центрировать Div с помощью CSS | Чарли Руссо | The Startup

Относительное позиционирование

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

Первое, что нам нужно сделать, это присвоить значение дочернему элементу позиции : значению relative; . Само по себе это может оказаться не слишком впечатляющим.Пока все, что мы сделали, это сказали элементу, что мы собираемся его перемещать и что мы собираемся перемещать его относительно его начальной позиции. Проще говоря, мы хотим переместить верхнюю часть на полпути вниз, а левую — на полпути от того места, где она изначально располагалась на странице, так что давайте сделаем именно это.

Мы можем сделать это, присвоив еще два свойства, top: и left: оба значения 50%; . Эти 50% относятся к 50% размера родительского элемента, в котором находится этот элемент. Это пока что не совсем правильно, не так ли? То, что до сих пор происходило на экране, — это именно то, что мы приказывали экрану делать. Мы переместили верхнюю часть вниз на полпути, а левую — на полпути. Может быть, это не совсем то, что мы хотели в конце концов.

Наша настоящая цель — переместить центр прямоугольника вниз и вперед. Технически мы могли бы просто отрегулировать процентное соотношение наших верхних и левых значений, чтобы они были более точными в соответствии с тем, что мы хотим, но есть гораздо более эффективный способ добиться этого.

Здесь мы можем использовать другое свойство, называемое преобразованием : . Это мощный инструмент, на изучение которого я рекомендую потратить некоторое время. Преобразование используется для всех видов вещей, включая вращение, изменение размера и даже перемещение элементов. Мы, конечно же, сосредоточимся на последнем. Здесь важно то, что свойство transform будет преобразовывать этот дочерний элемент по отношению к самому себе, а не к родительскому элементу. При этом мы можем добавить значение translate (-50%, -50%) к свойству преобразования.

Синтаксис здесь странный, признаю. Первое значение в скобках относится к движению вверх / вниз, а второе — к движению влево и вправо. положительные проценты будут перемещать элемент вниз или вправо соответственно, тогда как отрицательные значения будут перемещать элемент вверх или влево. Сам процент, опять же, относится к размеру фактического элемента. Подводя итог, это значение означает, что мы хотим переместить (сдвинуть) элемент вверх на половину его собственной высоты и влево на половину его собственной ширины.

Абсолютное позиционирование

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

Еще одно важное замечание: абсолютное позиционирование, в отличие от других методов, которые мы обсуждали, удаляет элемент из потока страницы. Это означает, что теперь элемент сможет перекрывать другие элементы страницы при неправильном использовании.

Если мы выполним те же шаги, что и описанный выше метод относительного позиционирования, мы получим аналогичные результаты, однако элемент будет отображаться по центру экрана, а не обязательно по центру в пределах своего родителя.

Чтобы исправить это, мы можем просто добавить position: relative; Положение или : абсолютное; также и к родительскому элементу.

Display Flex

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

При использовании Flexbox мы должны вернуться к тому же менталитету, о котором мы говорили ранее с выравниванием текста. Мы хотим разместить дочерний элемент внутри родительского элемента, и мы собираемся сделать это, превратив родительский элемент в гибкий бокс. Flexbox не влияет на позиционирование самого элемента, но он изменяет позиционирование содержимого (дочерних элементов) внутри элемента.

Все, что нам нужно сделать, это присвоить родительскому элементу свойство disply: со значением flex; , прежде чем мы начнем видеть некоторые изменения. Дочерний элемент теперь сдвинут до упора влево. Другими словами, содержимое flexbox выровнено по левому краю. мы можем изменить это, добавив свойство justify-content: со значением center; , который выровняет этот элемент по центру. Затем мы можем выбрать вертикальное выравнивание этого элемента внутри его родительского элемента, добавив свойство align-items: со значением center; тоже.Это оно! Дочерний элемент не нужно стилизовать.

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

Центрирование элемента с помощью CSS всегда было легко для одних вещей, но сложно для других. Вот полный список того, как центрировать с помощью CSS, а также с помощью современных методов CSS

Опубликовано , Последнее обновление

Центрирование элемента в CSS — это совсем другая задача, если вам нужно центрировать по горизонтали или вертикали.

В этом посте я объясню наиболее распространенные сценарии и способы их решения. Если Flexbox предоставляет новое решение, я игнорирую старые методы, потому что нам нужно двигаться вперед, а Flexbox уже много лет поддерживается браузерами, включая IE10.

По центру по горизонтали

Текст

Текст очень просто центрировать по горизонтали, используя свойство text-align , для которого установлено значение center :

  п {
  выравнивание текста: центр;
}  

Блоки

Современный способ центрировать все, что не является текстом, — использовать Flexbox:

  #mysection {
  дисплей: гибкий;
  justify-content: center;
}  

любой элемент внутри #mysection будет центрирован по горизонтали.


Вот альтернативный подход, если вы не хотите использовать Flexbox.

Все, что не является текстом, можно центрировать, применив автоматическое поле слева и справа и установив ширину элемента:

  section {
  маржа: 0 авто;
  ширина: 50%;
}  

выше маржа: 0 авто; — это сокращение от:

  section {
  margin-top: 0;
  нижнее поле: 0;
  маржа слева: авто;
  маржа-право: авто;
}  

Не забудьте установить для элемента значение display: block , если это встроенный элемент.

По центру по вертикали

Традиционно это всегда было сложной задачей. Flexbox теперь предоставляет нам отличный способ сделать это самым простым способом:

  #mysection {
  дисплей: гибкий;
  align-items: center;
}  

любой элемент внутри #mysection будет центрирован по вертикали.

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

Техники Flexbox для центрирования по вертикали и горизонтали можно комбинировать для полного центрирования элемента на странице.

  #mysection {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}  

То же самое можно сделать с помощью CSS Grid:

 корпус  {
  дисплей: сетка;
  места-предметы: центр;
  высота: 100vh;
}  

Больше руководств по css:

Center Div по горизонтали и вертикали: 5 способов центрировать div по вертикали и горизонтали с помощью CSS

Каждый разработчик должен был сталкиваться с этой задачей центрирования div в своей жизни хотя бы один раз или каждый божий день.У всех есть своя удобная техника, но для новичков она временами может расстраивать.

В этой статье я составил список различных приемов CSS для центрирования div по горизонтали и вертикали по центру на странице, выберите один или два трюка и сделайте его вашим любимым.

Метод 1. Использование Flex

Я хотел, чтобы эта техника была лучшей, так как она моя самая любимая. В этом трюке все свойства CSS определены в родительском контейнере.

Мы определяем родительский элемент с помощью свойства display: flex вместе с justify-content (горизонтальное размещение по умолчанию) и align-items (вертикальное размещение по умолчанию) center. Эти свойства соответствуют спецификациям Flex. Один из сбоев в выполнении этой работы — предоставление родительскому элементу фиксированной ширины и высоты.

Метод 2: Использование сетки

Используя CSS Grid, мы можем достичь нашей цели двумя способами. Во-первых, с помощью свойств ‘place-items’, , а во-вторых, с помощью ‘выровняйте и выровняйте себя’ . И снова эти свойства являются эксклюзивными для CSS Grid.

a) Используя place-items , мы предоставляем правила родителю, и только он творит чудеса.Мы даем родительскому элементу ‘display: grid’ и ‘place-items: center’ , и все становится суперцентрированным.

b) Используя ‘justify and align-self’ , мы предоставляем родительскому контейнеру свойство ‘display: grid’ , а основные свойства передаются дочернему контейнеру — ‘align-self Реквизитам (вертикальное размещение) и ‘justify-self’ (горизонтальное размещение) присваивается значение по центру.

Метод 3. Использование CSS-позиционирования и преобразования CSS

Это один из старых методов, которым мы следуем для центрирования элементов на странице. Мы делаем позицию дочернего контейнера абсолютной для родительского контейнера и перемещаем дочерний контейнер на 50% сверху и слева от родительского.

Метод 4: Использование поля CSS

Еще один старый метод отлично работает во всех браузерах.Все, что нам нужно сделать, это определить стиль ‘margin: 0 auto’ для дочернего контейнера. Я лично столкнулся с некоторыми несоответствиями при использовании этого метода, поэтому я всегда добавляю дополнительные свойства для центрирования элементов.

Метод 5. Использование CSS-позиционирования

Это один из распространенных методов, используемых с момента появления «CSS Positioning» . Мы делаем дочерний контейнер ‘абсолютным’ родительским и определяем свойства top, left, right и bottom ‘0’ вместе с ‘margin: auto’ .

Примечание: вставка CSS — это сокращение для свойства top, left, right и bottom (в настоящее время это свойство поддерживается только в Firefox)

вставка: 2px 3px 4px 5px / * верхний правый нижний левый * /

Бонусный метод: использование таблицы CSS

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

Мы должны предоставить оболочке ‘display: table’ (который находится на уровень выше родительского), затем мы используем свойство ‘display: table-cell’ в родительском элементе.

Двумя различиями являются дочерние свойства: во-первых, используется свойство ‘margin’, , а во втором — ‘display: inline-block’ .

Мы подошли к концу этой статьи.Я прикрепил код Codepen ниже, где вы можете найти все вышеупомянутые трюки в одном месте, поэкспериментировать с ним и поделиться здесь, если вы будете следовать каким-либо интересным трюкам, чтобы сосредоточить внимание.

Надеюсь, эта статья окажется для вас полезной и информативной. Если вам понравилась эта статья, дайте мне оценку 👍 Не забудьте добавить ее в закладки для дальнейшего использования 🔖

Спасибо за чтение 🤓

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *