HTML/CSS

Вертикальное выравнивание текста в блоке

Способ выравнять текст по вертикали в блоках фиксированной высотой. Текст обворачивается в тег с классом .child, а за ним добавляется пустой тег с классом .helper.

Важно чтобы между тегами не было пробелов и переносов строк, как показано в примере:

<div><span class="child">Текст который нужно выровнять</span><span class="helper"></span></div>

CSS стили:

/* Вертикальное выравнивание */
.child {
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
}
.helper {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
    zoom: 1;
}
1

Пример с текстом

<div>
    <div><span class="child">Быстрая доставка</span><span class="helper"></span></div>
    <div><span class="child">Скидки клиентам, сезонные акции</span><span class="helper"></span></div>
    <div><span class="child">Большой ассортимент товаров...</span><span class="helper"></span></div>
    <div><span class="child">Гарантия от 1 года</span><span class="helper"></span></div>
</div>
2

Пример с ссылками

<div>
    <div><a class="child" href="#">Быстрая доставка</a><span class="helper"></span></div>
    <div><a class="child" href="#">Скидки клиентам, сезонные акции</a><span class="helper"></span></div>
    <div><a class="child" href="#">Большой ассортимент товаров...</a><span class="helper"></span></div>
    <div><a class="child" href="#">Гарантия от 1 года</a><span class="helper"></span></div>
</div>
07 декабря 2016
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.