CSS Recipes

Центрирование блочного элемента по горизонтали

Ключевые CSS свойства

  • margin: 0 auto;

See the Pen gaMvRW by Anastasia (@Tayanovskaya) on CodePen.

Ссылки:

Центрирование текста по горизонтали

Ключевые CSS свойства

  • text-align

See the Pen centering6 by Anastasia (@Tayanovskaya) on CodePen.

Выравнивание inline-block элементов по вертикали (1)

Ключевые CSS свойства

  • vertical-align (значение по умолчанию - baseline)

See the Pen baseline by Anastasia (@Tayanovskaya) on CodePen.

Ссылки:

Выравнивание inline-block элементов по вертикали (2)

Ключевые CSS свойства

  • vertical-align

See the Pen verticalAlign by Anastasia (@Tayanovskaya) on CodePen.

Центрирование блочного элемента с заданными параметрами по горизонтали и вертикали (1)

Ключевые CSS свойства

  • position
  • top, left
  • margin

See the Pen centering4 by Anastasia (@Tayanovskaya) on CodePen.

Центрирование блочного элемента с заданными параметрами по горизонтали и вертикали (2)

Ключевые CSS свойства

  • position
  • top, left, bottom, right
  • margin

See the Pen centering2 by Anastasia (@Tayanovskaya) on CodePen.

Центрирование элемента с неизвестными параметрами по горизонтали и вертикали (1)

Ключевые CSS свойства

  • display
  • :before
  • vertical-align

See the Pen centering3 by Anastasia (@Tayanovskaya) on CodePen.

Центрирование элемента с неизвестными параметрами по горизонтали и вертикали (2)

Ключевые CSS свойства

  • position
  • transform

See the Pen centering5 by Anastasia (@Tayanovskaya) on CodePen.

Полезные ссылки по центрированию элементов

Использование псевдоэлементов :after, :before

See the Pen Pseudo by Anastasia (@Tayanovskaya) on CodePen.

Полезные ссылки по использованию псевдоэлементов

Обрезка текста с многоточием

Ключевые CSS свойства

  • text-overflow
  • overflow
  • white-space

See the Pen JYGLKp by Anastasia (@Tayanovskaya) on CodePen.

Полезные ссылки:

Прикрепление footer к низу страницы

Cпособ 1

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты html элемента на 100%, для body - min-height: 100%. При этом контентному блоку .container нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

Пример

Прикрепление footer к низу страницы

Cпособ 2

Footer прижимается вниз за счет вытягивания блока контента и его родительских элементов на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

Пример

Прикрепление footer к низу страницы

Cпособ 3

Использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

Пример

Sliding Doors техника vs CSS3 для кнопок

Sliding Doors 1 Sliding Doors 2
Пример

Полезные ссылки:

Таблицы

Полезные ссылки:

Верстка писем

Ключевые особенности:

Полезные ссылки: