Div выравнивание содержимого по центру: html — Как сделать содержимое блока по центру в CSS?

Leave a Comment / Разное / By /

Flexbox — выравнивание содержимого — CoderLessons.com

Если flex-контейнер имеет несколько строк (когда flex-wrap: wrap), свойство align-content определяет выравнивание каждой строки в контейнере.

Использование —

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Это свойство принимает следующие значения —

  • stretch — строки в содержимом будут растягиваться, чтобы заполнить оставшееся пространство.

  • flex-start — все строки в содержимом упаковываются в начале контейнера.

  • flex-end — все строки в содержимом упакованы в конце контейнера.

  • центр — все строки в содержимом упакованы в центре контейнера.

  • space -ween — дополнительное пространство распределяется между строками равномерно.

  • space -round — дополнительное пространство распределяется между строками равномерно с равным пространством вокруг каждой строки (включая первую и последнюю строки)

stretch — строки в содержимом будут растягиваться, чтобы заполнить оставшееся пространство.

flex-start — все строки в содержимом упаковываются в начале контейнера.

flex-end — все строки в содержимом упакованы в конце контейнера.

центр — все строки в содержимом упакованы в центре контейнера.

space -ween — дополнительное пространство распределяется между строками равномерно.

space -round — дополнительное пространство распределяется между строками равномерно с равным пространством вокруг каждой строки (включая первую и последнюю строки)

центр

При передаче этого значения свойству align-content все строки упаковываются в центре контейнера.

В следующем примере демонстрируется результат передачи центра значения в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      . box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

Flex-старт

При передаче этого значения свойству align-content все строки упаковываются в начале контейнера.

В следующем примере демонстрируется результат передачи значения flex-start в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

изгибать-конец

При передаче этого значения свойству align-content все строки упаковываются в конец контейнера.

В следующем примере демонстрируется результат передачи значения flex-end в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

протяжение

При передаче этого значения свойству align-content линии будут растягиваться, чтобы заполнить оставшееся пространство.

В следующем примере демонстрируется результат передачи значения stretch в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

пространство вокруг

При передаче этого значения свойству align-content дополнительное пространство распределяется между строками равномерно с равным пространством вокруг каждой строки (включая первую и последнюю строки).

В следующем примере демонстрируется результат передачи значения space-around в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

пространство между ними

При передаче этого значения свойству align-content дополнительное пространство распределяется между строками равномерно, где первая строка будет вверху, а последняя строка — внизу контейнера.

В следующем примере демонстрируется результат передачи значения space -ween в свойство align-content .

Live Demo

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

Теги HTML — Атрибут align

Описание

Выравнивание содержимого контейнера <div> по краю.

Вместо этого атрибута необходимо использовать стили

Синтаксис

<div align="center | left | right | justify">...</div>

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

left

Аналог CSS

text-align

Пример.
Выравнивание текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIV, атрибут align</title>
  <style type="text/css">
   #layer1 {
   	background: #fc0;
    padding: 5px;
   }
   #layer2 {
  	background: #fff;
  	width: 60%;
  	padding: 10px;
   }
  </style>
 </head>
 <body>
  <div align="right">
  <div align="left">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat.
  </div>
  </div>
 </body>
</html>

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
413.511

AndroidFirefox MobileOpera MobileSafari Mobile
1161

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *