блок посередине по горизонтали, как поставить 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>
смотрим