• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Центрировать по вертикали и горизонтали (Горизонтальное и вертикальное выравнивание элементов)
Центрировать по вертикали и горизонтали
Kosten
Дата: Суббота, 2019-12-07, 23:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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

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

Эта техника работает во всех современных браузерах - IE10 +, Chrome, Firefox и Safari. Смотрите полную таблицу совместимости здесь.




HTML

Код
<div class="dadebtse-kasaova">
    <p>Мы приближаемся к концу текущего поколения игровых приставок, и это означает, что приставки следующего поколения уже существуют как «наборы разработчика» в игровых студиях по всему миру. Теперь у нас есть первое подтвержденное изображение комплекта разработчика PlayStation 5, и это довольно странно. Настоящая PlayStation 5, вероятно, будет выглядеть не совсем так, но мы можем мечтать.</p>
</div>

Идея конечно же вращается вокруг flexbox, где сначала мы создаем контейнер, в котором мы хотим, чтобы все было сосредоточено.
CSS

Код
.dadebtse-kasaova{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.dadebtse-kasaova p{
    max-width: 50%;
    padding: 15px;
    background-color: #f1f1f1;
}

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

Каждый гибкий контейнер имеет две оси для позиционирования элементов. Главная ось объявляется со свойством flex-direction. Опуская это правило, мы оставили гибкое направление на его rowзначение по умолчанию.

Теперь все, что нам нужно сделать, это центрировать обе оси.

1. Сделайте тип дисплея flex, чтобы мы активировали режим flexbox.
2. Где justify-content определяет элементы Flex, что будут выровнены в соответствии с главной осью.
3. Также align-items делает то же самое с осью, перпендикулярной основной, в нашем случае вертикально.

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

Вывод

Существует множество других методов для центрирования контента с помощью CSS, но flexbox делает это намного проще и элегантнее.

Демонстрация
Прикрепления: 0210205.jpg(8.0 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-12-07, 23:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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

Горизонтальное центрирование с помощью CSS

Это так же просто, как применить поле к div:

CSS

Код
.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

Чтобы центрировать div только по горизонтали, вам нужно указать ширину и автоматическое значение для левого и правого полей. Этот метод работает с элементами уровня блока div, абзацы, h1 и так далее. Чтобы применить его к встроенным элементам, таким как гиперссылки и изображения, необходимо применить одно дополнительное правило - display: block.

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

Центрировать div по горизонтали и вертикали с помощью CSS немного сложнее. Вы должны знать размеры div заранее.

CSS

Код
.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

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

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

Горизонтальное и вертикальное центрирование с помощью jQuery

Как упоминалось ранее - метод CSS работает только с div с фиксированными размерами, где jQuery вступает в игру:

Код
$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

Функциональность вставляется в оператор $ (window) .resize, который выполняется каждый раз, когда пользователь изменяет размер окна. Мы используем outerWidth и outerHeight, потому что в отличие от обычных width и height, они добавляют отступ и ширину границы к возвращаемому размеру. Наконец, мы моделируем событие изменения размера, чтобы выровнять div по загрузке страницы.

Преимущество использования этого метода заключается в том, что вам не нужно знать, насколько велик div. Основным недостатком является то, что он будет работать только с включенным JavaScript. Это делает его идеальным для богатых пользовательских интерфейсов, таких как Facebook.
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-12-08, 21:40 | Сообщение 3
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


В этом примере мы используем позиционирование и свойство transform для вертикального и горизонтального центрирования элемента div:



Код
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Центрирование</h2>
<p>В этом примере мы используем позиционирование и свойство transform для вертикального и горизонтального центрирования элемента div:</p>

<div class="center">
  <p>Я вертикально и горизонтально по центру.</p>
</div>

<p>Примечание. Свойство transform не поддерживается в IE8 и более ранних версиях.</p>

</body>
</html>


Примечание: Свойство transform не поддерживается в IE8 и более ранних версиях.
Прикрепления: 7860425.png(5.1 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-12-08, 21:46 | Сообщение 4
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


В этом примере мы используем padding и text-align для центрирования элемента div по вертикали и горизонтали.



Код
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Центрирование</h2>
<p>В этом примере мы используем padding и text-align для центрирования элемента div по вертикали и горизонтали:</p>

<div class="center">
  <p>Я вертикально и горизонтально по центру.</p>
</div>

</body>
</html>
Прикрепления: 4190679.png(4.9 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-12-08, 21:55 | Сообщение 5
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


Центрировать изображение



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

Код
<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Центрировать изображение</h2>
<p>Чтобы центрировать изображение, установите для левого и правого поля значение auto и превратите его в элемент блока.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>
Прикрепления: 7961219.png(108.9 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-12-08, 21:56 | Сообщение 6
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


Выровнять текст по центру

Чтобы просто центрировать текст внутри элемента, используйте text-align: center; смотрим ниже.



Код
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>
Прикрепления: 7641833.png(1.9 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2019-12-10, 02:43 | Сообщение 7
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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

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

Горизонтальное и вертикальное выравнивание элементов

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:

Код
div {
  width: 300px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

Код
<div class="wrapper">
<div class="box"></div>
</div>


CSS

Код
.wrapper {text-align: center;}


1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

Код
<div class="wrapper">
<div class="box"></div>
</div>


CSS

Код
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute;
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}


1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

Код
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>


CSS

Код
.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}


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

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

Код
.button {
  height: 50px;
  line-height: 50px;
}

2.2. Для выравнивания блока по вертикали внутри родительского блока:

Код
<div class="wrapper">
<div class="box"></div>
</div>


CSS

Код
.wrapper {position: relative;}
.box {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

2.3. Вертикальное выравнивание по типу таблицы:

Код
<div class="wrapper">
<div class="box"></div>
</div>

CSS

Код
.wrapper {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:

Код
<div class="wrapper">
<div class="box"></div>
</div>

CSS

Код
.wrapper {
  position: relative;
}
.box {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto; /*чтобы контент не расползался*/
}

2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

Если для элемента заданы размеры

Код
<div></div>

CSS

Код
div {
  width: 300px; /*задаем ширину блока*/
  height:100px; /*задаем высоту блока*/
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

Если для элемента не заданы размеры и он не пустой

Код
<div>
  <h1>Some text here</h1>
</div>

CSS

Код
h1 {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

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

по центру страницы

Код
<body>
<div class="box"></div>
</body>

CSS

Код
div {
  width: 500px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

по центру блока

Код
<div class="wrapper">
<div class="box"></div>
</div>

CSS

Код
.wrapper {
  position: absolute;
}
.box {
  width: 100px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Центрировать по вертикали и горизонтали (Горизонтальное и вертикальное выравнивание элементов)
  • Страница 1 из 1
  • 1
Поиск: