Горизонтальное выравнивание div посередине

2018/09/13 Марат 20 0 #HTML | #POSITION_ELEMENT |

блок посередине по горизонтали, как поставить div посередине по горизонтали, сколько есть способов поставить div посередине. Примеры расположения блока посередине. Любой элемент, который имеет блочные свойства расположим посередине.

Подробно о блоке посередине по горизонтали

Поставим блок/div посередине(margin) по горизонтали
Поставим блок/div посередине(проценты) по горизонтали
Поставим блок/div посередине(проценты 2) по горизонтали
Поставим блок/div посередине(flex) по горизонтали

Скопировать ссылку

Поставим блок/div посередине(margin) по горизонтали

В первом варианте установки блока посередине по горизонтали будем использовать margin.

Первым шагом нам нужен блок/div, который и будем ставить посередине по горизонтали.

Добавим ему класс(class) и текст:

HTML :

<div class="div_poseredine ">Здесь блок div_poseredine</div>

Основное свойство, которое будет устанавливать наш блок посередине по горизонтали это

margin:0 auto;

Но здесь нужно помнить, что у блока должна быть ширина [width] - иначе ничего не будет работать.

CSS :

.div_poseredine {
margin:0 auto;/* Положение посередине */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
height:300px; /* Высота */
}

Результат установки блока посередине по горизонтали с помощью margin

Здесь блок div_poseredine

Поставим блок/div посередине по горизонтали на отдельной странице

Сможет ли данный способ поставить div посередине, если будет расположен на отдельной странице?

простой страницы

Html :


		<!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 тоже будет участвовать.

HTML :

Создадим наш новый блок/div с классом и текстом:

<div class="div_poseredine_1">Здесь блок div_poseredine_1</div>

Зададим ширину блока в процентах:

height:300px;

Если мы отнимем 100% - 50%, то получим = 50% - что будет равно двум отступам, слева и справа. Поэтом уделим пополам и получаем 25%. Слева и справа в margin это будет так:

margin: 0 25%;

CSS :

.div_poseredine_1{
background: yellow;
width: 50%;
height:300px;
margin: 0 25%;
}

Результат установки блока посередине по горизонтали с помощью процентов.

Здесь блок div_poseredine_1

Пример div посередине(проценты) по горизонтали

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

Html :


		<!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? с классом и текстом:

<div class="div_poseredine_2 ">Здесь блок div_poseredine_2 </div>

Устанавливаем ширину блока 50% :

width: 50%;

Отступ слева делаем 25% :

left: 25%;

position: relative :

position: relative;

CSS :

.div_poseredine_2 {
background: #eccd02;
width: 50%;
left: 25%;
position: relative;
}

Результат установки блока посередине по горизонтали:

Здесь блок div_poseredine_2

Пример блок-а посередине(проценты 2) по горизонтали

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

По краям поставим 30%, а ширину блока поставим 100 - 30%*2 = 100 -60 = 40

Html :


		<!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 будет чуть-чуть посложнее :

HTML :

<div class="po_tsentru"> <span style="background: #ffa703;">Блок посередине</span> </div>

Чтобы вы увидели наружный край блока :

border: 1px solid gainsboro;

Изменим свойство "display" у "div" :

display: flex;

Выравнивание контента внутри блока:

justify-content: center;

CSS :

.po_tsentru {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid gainsboro;
}

Результат установки блока посередине по горизонтали flex :

Блок посередине

Результат расположения блока посередине по горизонтали

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

Html :


		<!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>

смотрим

Последняя дата редактирования : 27.03.2021 13:22

//dwweb.ru/comments_1_5/include/img/hand_no_foto.png

Еще никто не прокомментировал! COMMENTS+ BBcode

Теги:
посередине по горизонтали css css блок посередине по горизонтали css выровнять по горизонтали посередине текст посередине по горизонтали css css выравнивание посередине по горизонтали css div посередине по горизонтали

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.