Мой Справочник | CSS | Инлайн-блоки

Если инлайн-блок один, то он вертикально выравнивается по своей height относительно line-height родительского контейнера, причём line-height родителя должно быть больше чем height инлайн-блока.

Если их несколько, то они выравниваются относительно большей height отдельного инлайн-блока.

HTML:


        <div class="display">

          <div class="inline_block block1"></div>

          <div class="inline_block block2"></div>

          <div class="inline_block block3"></div>

        </div>

CSS:


    .display {text-align: right;}

    .inline_block {

      display: inline-block;

      width: 100px;

      margin-right: 10px;

      padding: 10px;

      color: white;

      text-align: center;

      vertical-align: middle;

      background-color: maroon;

      border: 3px solid deeppink;

    }

    .block1 {height: 50px;}

    .block2 {height: 75px;}

    .block3 {height: 100px;}

BOX1

BOX2

BOX3

ОТ СТРОЧНЫХ:
- располагаются в одну строку;
- реагируют на гор. и верт. выравнивание;
- ужимаются под содержимое;
ОТ БЛОЧНЫХ:
- можно задавать размеры;
- рамки и отступы;
- можно флоатить;

ИНЛАЙН-БЛОКИ применяют:

Создание групп иконок
Элементы меню
Контейнеры контент-боксов

vertical-align указывать ВСЕГДА!!!

Выравнивание inline-блоков без margin-right(3n):
Обернуть в блок и задать ему маргин-слева -20px, а у каждого инлайн-блок поставить маргин-слева 20px

vertical-align выравнивает не только по высоте контейнера. Это свойство выравнивает инлайн-блоки между собой, относительно самого высокого элемента СТРОЧНО