Как выровнять контент div по нижней границе

CSS позволяет выровнять контент <div> по нижней границе с помощью специальных методов. Можно также выровнять контент по верхней границе <div>, по левой или правой стороне нижней границы. Рассмотрим все возможные варианты. Следуйте приведенным ниже шагам.

Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.

1. Создайте HTML

  • Создайте <div> с классом “main”. Он включает три других div.
  • Разместите тег <h2> в первом div, который имеет название класса “column1”, напишите в нем контент.
  • Второй <div> имеет класс с названием “column2”.
  • Третий <div> имеет id с названием “bottom”.
<body>
  <div class="main">
    <div class=“column1”>
      <h2>W3docs</h2>
    </div>
    <div class=“column2”>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
    </div>
    <div id="bottom">Нижний контент Div</div>
  </div>
</body>

2. Добавьте CSS

  • Используйте свойства border, float, height, width, position для добавления стиля к классу "main". Свойство float указывает, с какой стороны контейнера должны находиться элементы. Свойство position указывает положение элемента в документе.
  • Установите color для текста первого <div>. В этом примере мы использовали значение hex для color.
  • Используйте свойство text-align для выравнивания внутреннего контента блочного элемента.
  • Используйте свойства bottom и left. Свойство bottom указывает для элемента нижнее позиционирование вместе со свойством position. Свойство left указывает левое позиционирование элемента вместе со свойством position.

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute). 
.main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      }

Давайте соединим части кода и посмотрим, как он работает!

Результат нашего кода

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      } 
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div id="bottom">Нижний контент Div</div>
    </div>
  </body>
</html>

Рассмотрим другой пример, где контент div выравнивается по правой стороне нижней границы.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position:relative; 
      } 
      .column1 { 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2 { 
      text-align:center; 
      } 
      #bottom { 
      position:absolute;                  
      bottom:0;                          
      right:0;                          
      } 
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div id="bottom">Нижний контент Div</div>
    </div>
  </body>
</html>

Рассмотрим другой пример, где контент div выравнивается по центру нижней границы.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      width:100%;
      text-align:center;
      color:#ffffff;
      background-color: blue;   
      padding:15px 0;                 
      } 
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div id="bottom">Нижний контент Div</div>
    </div>
  </body>
</html>

В этом примере мы задали 100% для width нижнего div.

Рассмотрим пример, где контент div выравнивается по центру с помощью flexbox. Flexbox - это одномерный макет, т.е. элементы расположены в виде строк или столбцов. В следующем примере мы использовали свойство flex-direction со значением "column". Свойство flex-direction указывает главную ось flex-контейнера и определяет порядок отображения флекс-элементов. Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Значение "space-between" используется со свойством justify-content, когда доступно пространство между строками элементов.

Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение "flex". Для выравнивания элементов по вертикали используйте свойство align-items.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid blue;
      height: 150px;
      display: flex;                   /* defines flexbox */
      flex-direction: column;          /* top to bottom */
      justify-content: space-between;  /* first item at start, last at end */
      }
      h2 {
      margin: 0;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>Header title</h2>
     Текст, выровненный по нижней границе
    </main>
  </body>
</html>

Рассмотрим другой пример, где использовано CSS свойство align-items. Оно указывает выравнивание по умолчанию для флекс-элементов. Это похоже на свойство justify-content, но является его вертикальной версией.

Обратите внимание, что некоторые браузеры не поддерживают display:flex. Используйте приведенные ниже префиксы. 
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
Заметьте, что для поддержки всеми браузерами мы используем расширения -Webkit- и -Moz- вместе со свойством align-items.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid green;
      background-color:green;
      color:#ffffff;
      padding:20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      flex-direction:column;
      }
      h2 {
      margin: 0;
      }
      p{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin:0;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>Header title</h2>
      <p>Текст, выровненный по нижней границе</p>
    </main>
  </body>
</html>

Давайте рассмотрим другой пример, где использовано свойство position. В нашем первом примере мы также использовали свойство position со значением "relative" для HTML-тега <main>, а значение "absolute" было использовано для нижнего div.

В этом примере мы используем свойство span class="property">position со значением "fixed" для <div>. Свойство z-index указывает порядок элементов и потомков, или флекс-элементов по оси z.

Свойство z-index имеет эффект только на позиционированных элементах.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      * {
      margin: 0;
      padding: 0;
      }
      main{
      position:relative;
      }
      div{
      background-color: yellow;
      height: 200px;
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 1;
      border-top: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>This is the header
      </h2>
      <div>Текст, выровненный по нижней границе</div>
    </main>
  </body>
</html>