Горизонтальное выравнивание div посередине
блок посередине по горизонтали, как поставить div посередине по горизонтали, сколько есть способов поставить div посередине. Примеры расположения блока посередине. Любой элемент, который имеет блочные свойства расположим посередине.
Подробно о блоке посередине по горизонтали
- Поставим блок/div посередине(margin) по горизонтали
- Поставим блок/div посередине(проценты) по горизонтали
- Поставим блок/div посередине(проценты 2) по горизонтали
- Поставим блок/div посередине(flex) по горизонтали
Поставим блок/div посередине(margin) по горизонтали
В первом варианте установки блока посередине по горизонтали будем использовать margin.
Первым шагом нам нужен блок/div, который и будем ставить посередине по горизонтали.
Добавим ему класс(class) и текст:
Основное свойство, которое будет устанавливать наш блок посередине по горизонтали это
Но здесь нужно помнить, что у блока должна быть ширина [width] - иначе ничего не будет работать.
margin:0 auto;/* Положение посередине */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
height:300px; /* Высота */
}
Результат установки блока посередине по горизонтали с помощью margin
Поставим блок/div посередине по горизонтали на отдельной странице
Сможет ли данный способ поставить div посередине, если будет расположен на отдельной странице?
Возьмем код простой страницы и разместим ранее сделанный блок посередине по горизонтали:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>.div_poseredine {
margin:0 auto;
background: #fd0;
width: 300px;
height:300px;
}</style>
</head>
<body>
<div class="div_poseredine ">Здесь блок div_poseredine</div>
</body>
</html>
Результат расположения блока посередине по горизонтали
смотримПоставим блок/div посередине(проценты) по горизонтали
Один из способов поставить блок/div пор посередине по горизонтали - это мерить блоки и отступы в процентах, но и margin тоже будет участвовать.
Создадим наш новый блок/div с классом и текстом:
Зададим ширину блока в процентах:
Если мы отнимем 100% - 50%, то получим = 50% - что будет равно двум отступам, слева и справа. Поэтом уделим пополам и получаем 25%. Слева и справа в margin это будет так:
background: yellow;
width: 50%;
height:300px;
margin: 0 25%;
}
Результат установки блока посередине по горизонтали с помощью процентов.
Пример div посередине(проценты) по горизонтали
Этот способ применяют в случаях, когда требуется привязать ширину блока в зависимости от ширины экрана. Тка называемые резиновые страницы, резиновые блоки.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>.div_poseredine {
margin:background: yellow;
width: 50%;
height:300px;
margin: 0 25%;
}</style>
</head>
<body>
<div class="div_poseredine ">Здесь блок div_poseredine</div>
</body>
</html>
Результат расположения блока посередине по горизонтали
Естественно, что сам блок будет зависеть от ширины экрана...
смотримПоставим блок/div посередине(проценты 2) по горизонтали
Следующий вариант постановки блока посередине по горизонтали, без margin.
Опять нам нужен наш подопытный div? с классом и текстом:
Устанавливаем ширину блока 50% :
Отступ слева делаем 25% :
position: relative :
background: #eccd02;
width: 50%;
left: 25%;
position: relative;
}
Результат установки блока посередине по горизонтали:
Пример блок-а посередине(проценты 2) по горизонтали
И опять это получается резиновый блок, поэтому, давайте изменим чуть-чуть..
По краям поставим 30%, а ширину блока поставим 100 - 30%*2 = 100 -60 = 40
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>.div_poseredine {
background: #eccd02;
width: 40%;
left: 30%;
position: relative;
}</style>
</head>
<body>
<div class="div_poseredine ">Здесь блок div_poseredine</div>
</body>
</html>
Результат расположения блока посередине по горизонтали
смотримПоставим блок/div посередине(flex) по горизонтали
В следующем варианте html будет чуть-чуть посложнее :
Чтобы вы увидели наружный край блока :
Изменим свойство "display" у "div" :
Выравнивание контента внутри блока:
display: flex;
align-items: center;
justify-content: center;
border: 1px solid gainsboro;
}
Результат установки блока посередине по горизонтали flex :
Результат расположения блока посередине по горизонтали
Поступим с данным кодом аналогично, чтобы просмотреть, как он будет вести себя а отдельной странице...
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>.div_poseredine {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid gainsboro;
}</style>
</head>
<body>
<div class="div_poseredine"><span style="background: #ffa703;">Блок посередине</span></div>
</body>
</html>
смотрим