Как выровнять элементы inline-block по верхней границе контейнера

Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.

  • Создайте <div> с классом «container».
  • Создайте два других span внутри «container». Первый div имеет название «small-box», а второй называется «big-box».
<div>
  <span></span>
  <span></span>
</div>
  • Задайте height и width для классов.
  • Добавьте color, width и style к border.
  • Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.
.container { 
border: 1px solid #666666;
width: 350px;
height: 150px;    
}

.
 
 small-box{
display: inline-block;
width: 40%;
height: 30%;
border: 1px solid #666666;
background: #1c87c9;    
}

.big-box {
display: inline-block;
border: 1px solid #666666;
width: 40%;
height: 50%;
background: #8ebf42;    
}

Окончательный результат:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;    
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Нашей проблемой является выравнивание .

small-box по верхней границе контейнера.

Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.

Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.

Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:

.small-box{ 
vertical-align: top;
}

Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;  
      vertical-align:top;  
      }
      .
 
 big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов <li>.

Пример, где произошла ошибка:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .
 
 normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      }
      ul li{
      display:inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
        Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float, которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      clear:both;
      content:"";
      display: table;
      }
      ul li{
      float:left;
      list-style-type:none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
          Как выровнять верхние границы всех цветных div.
 
 
 
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      color:#ffffff;
      display:flex;
      display: -webkit-flex;
      align-items:flex-start;
      -webkit-align-items:flex-start;
      }
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .
 
 big {
      height:200px;
      width:200px;
      display:inline-block;
      padding:10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Blue</span>
      <strong>Green</strong>
      <span>Grey</span>
      <span>
      Как выровнять верхние границы всех цветных div.
      </span>
    </div>
  </body>
</html>

Попробуйте сами!

Выравнивание по центру в CSS

Сегодня хочется рассмотреть очень важную тему — выравнивание элементов по горизонтали и вертикали.
Изучим текущее положение дел.
Итак, мы видим, что у нас есть блочный элемент, растягивающийся по ширине на всю страницу, а внутри дочерний строковый span. У обоих элементов по-умолчанию position: static, значит они находятся в потоке.

Выравнивание по горизонтали

С выравниванием по горизонтали проблем обычно нет. В данном случае дочерний элемент строковый, значит мы можем выровнять все текстовое содержимое дива  с помощью text-align: center. В том случае, если бы он был строчно-блоковый, можно было бы воспользоваться тем же методом.

А что если бы наш дочерний элемент был бы блочным с заданной шириной? Видим, что на блочное содержимое text-align не действует:

Если мы не зададим ширину, то текст отцентрируется, но лишь потому что элемент займет всю ширину, а нам обычно нужно центрирование самого блока.
В данном случае мы можем прибегнуть к margin: auto. Браузер автоматический определит отступы нашего дочернего элемента со всех сторон. Но посмотрите по вертикали элемент не отцентрировался. Потому что margin-top и margin-bottom приводятся автоматом к 0.

Выравнивание по вертикали

Что же нам делать с вертикальным выравниванием?
Рассматриваем известные. Мы знаем высоту родительского элемента, к тому же дочерний элемент — одна строка. Значит можем задать ей высоту:
line-height: 200px;
Ровно столько сколько высота родительского элемента. Так как текст в span встает по центру строки, мы его так отцентрируем.

Аналогично line-height сработает и для строчного дочернего элемента.
Однако, для нескольких строк такой вариант не сработает.
Для наглядности покрасим наш родительский элемент. И можно вспомнить про position: absolute.
Для начала нужно позиционировать родительский элемент, чтобы отсчитывать отступы дочернего относительно него. Ставим в div position: relative.
Далее позиционируем дочерний абсолютно, задаем отступ сверху 50%. Однако, в данном случае по центру у нас будет вершина дочернего элемента. Ставим margint-top равный половине высоты дочернего элемента. В случае с одной строкой эта высота равна line-height.

Отлично, все работает. Разве что перестал работать margin: auto для выравнивания по горизонтали, так как при абсолютном позиционировании margin рассчитывается только если задано расстояние элемента от родительского позиционированного для данной стороны. Т.е. для того, чтобы работал margin: auto для левой и правой стороны, нам нужно задать left и right.

А теперь давайте забудет про абсолютное позиционирование. И попробуем другие способы. Например, мы может воспользоваться свойством display: table. Правда, как у любой таблицы, ширина родительского элемента теперь рассчитывается по содержимому. Зато нам не требуется знание высоты дочернего элемента, как в случаей с абсолютным позиционированием.

Кстати, если дочерний элемент инлайновый и известна высота родителя, то мы можем использовать vertical-align: middle.

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

Почему это работает? Сначала следует сказать,что строчно-блочные элементы выстраиваются в линию, которая заключена в так называемую box-line. Высота коробки зависит от высоты содержимого. Внутри коробки есть базовая линия, на которой располагается строковое содержимое инлайн элемента. Положение этой линии может меняться в зависимости от значения vertical-align любого инлайн элемента, входящего в box-line.
Мы хотим выровнять относительно родительского элемента, значит нужно назначить дочернему его высоту. Мы не можем нашему дочернему поставить такую высоту, ведь он нам нужен не на весь родительский. Тогда мы используем дополнительный элемент. Он невидим, если мы, проставим для него только высоту. Но он меняет положение базовой линии для всей строки. Поэтому аналогично выравнится и исходный элемент.

Еще, конечно, можно воспользоваться flex:  justify-content устанавливает выравнивание по горизонтали, а align-items по вертикали. Но обратите внимание на поддержку браузерами.

Полезные статьи

Vertical-Align: All You Need To Know
A Complete Guide to Flexbox

CSS: Выравнивание по центру списка с текстом, выровненным по левому краю (и неизвестной шириной)

Вот краткое руководство CSS , показывающее, как выровнять по центру элемент списка с текстом, выровненным по левому краю.

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

      Работая над страницей отзывов для моего нового книжного магазина, я хотел выровнять по центру неупорядоченный список без указания ширины . Когда вы указываете ширину, выравнивание по центру легко выполняется с помощью поля : auto; . Как в этом примере:

       ул {
ширина: 400 пикселей;
поле слева: авто;
поле справа: авто;
}

      Когда вы идете по этому пути, вы получаете выровненный по центру список со всем текстом, выровненным по левому краю. Так что это самое простое решение для списков (и других элементов), которые имеют известную/установленную фиксированную ширину. Но, конечно, я не хотел указывать ширину для этого конкретного случая.

      Итак, не устанавливая ширину элемента списка, я добавил text-align: center; в родительский div и получил это:

      Обратите внимание, маркеры в списке расположены далеко слева от элементов списка

      Маркеры списка отображаются по левому краю, но текст списка выравнивается по центру. Таким образом, между маркерами и текстом для каждого элемента списка есть странный разрыв. Решение состоит в том, чтобы сделать список встроенным блоком и установить для его text-align значение 9.0005 осталось . Вот окончательный код :

       div.parent {
выравнивание текста: по центру;
}
ул {
отображение: встроенный блок;
выравнивание текста: по левому краю;
}

      А разметка HTML выглядит так:

       
      
<ул>

    1. Элемент 1
      2. 

    2. Элемент 2
      3. 

    3. Элемент 3
      4. 

    4. Элемент 4
      5.

Вот окончательный результат:

Приведенный выше код приводит к выровнению списка по центру, но с выравниванием текста по левому краю

Миссия выполнена. Этот метод также добавляет преимущество соблюдения поля тега предыдущего абзаца. До того, как мы сделали список встроенным блоком, расстояние по вертикали между списком и предыдущим абзацем выглядело следующим образом: нижнее поле абзаца игнорируется/сворачивается, поэтому список располагается близко к тексту абзаца. Теперь сравните интервал по вертикали после изменения элемента списка на встроенный блок:

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

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

Как бы то ни было, идея была отличной, чтобы поделиться ею. Наслаждаться!

список советов хитрости

Об авторе

Джефф Старр = веб-разработчик. Автор книги. Тайно важно.

WP Themes In Depth: Создавайте и продавайте потрясающие темы WordPress.

Центрирование встроенного блока с выравниванием по вертикали: посередине (CSS)

Свойства CSS display: inline-block и vertical-align: middle обеспечивают гибкий и удобный способ центрирования любого содержимого внутри

. Высота
даже не должна быть известна и может динамически определяться его содержимым.

Давайте перейдем сразу и начнем с

Ура, я в центре синей области!

Нажмите, чтобы изменить высоту содержимого

Минимальная разметка и CSS:

 

  <дел><дел>
      Ура, я в центре синей области!
<дел>