|
Центрировать по вертикали и горизонтали
|
|
| Kosten | Суббота, 07 Декабря 2019, 23:06 | Сообщение 1 |
| При построении макетов веб-страниц вы, вероятно, сталкивались с ситуацией, когда вам нужно центрировать 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 делает это намного проще и элегантнее.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 07 Декабря 2019, 23:20 | Сообщение 2 |
|
| Продолжение темы, как центрирование деления как по горизонтали, так и по вертикали. Есть более чем несколько способов достичь этого, и в этом 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 | Воскресенье, 08 Декабря 2019, 21:40 | Сообщение 3 |
|
| В этом примере мы используем позиционирование и свойство 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 и более ранних версиях.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 08 Декабря 2019, 21:46 | Сообщение 4 |
|
| В этом примере мы используем 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> | | Страна: (RU) |
| |
| Kosten | Воскресенье, 08 Декабря 2019, 21:55 | Сообщение 5 |
|
| Центрировать изображение
Чтобы центрировать изображение, установите для левого и правого поля значение 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> | | Страна: (RU) |
| |
| Kosten | Воскресенье, 08 Декабря 2019, 21:56 | Сообщение 6 |
|
| Выровнять текст по центру
Чтобы просто центрировать текст внутри элемента, используйте 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> | | Страна: (RU) |
| |
| Kosten | Вторник, 10 Декабря 2019, 02:43 | Сообщение 7 |
|
| Центрирование элементов по вертикали с помощью 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-трансформации:
Если для элемента заданы размеры
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) |
| |
