Вторник, 31 Март 2015 00:00

CSS, центрирование текста в контейнере div

Те, кто занимаются вёрсткой сайтов, наверняка сталкивались с такой проблемой, как «центрирование текста в блоке div». Я, как человек, немного промышляющий в этой области, тоже столкнулся с этой проблемой. К слову сказать, обычно я эту проблему решал через html-код (align=”center” в нужном мне месте и всё становилось на свои места), но в этот раз так сделать не получилось.

Вообще у этой проблемы есть несколько решений, самое распространённое:

margin: 0 auto;

Для многих элементов, подобное решение будет выходом из проблемы, но меня оно не спасло. Опять-таки это была работа с элементом «кнопки» и здесь я находил выход в виде:

padding:10px;

Значение 10px – произвольное, но подобное решение хорошо там, где дизайн кнопке задаётся этим самым padding’ом, размеры у этих кнопок не будут фиксированными. По крайне мере высота будет одинаковой, но ширина у каждой кнопки своя – в зависимости от ширины текста этой самой кнопки.

Но мой случай требовал другого решения, поскольку ширина кнопки была фиксированной, и её дизайн задавался не padding’ом. Ширина текста в кнопках отличалась, друг от друга, а на html-код кнопки я повлиять никак не мог. Да и не хотел, честно говоря, доколе, доколе скажите мне, я должен всё это терпеть, когда как должно же быть какое-то решение этой проблемы. И да решение таки имеет место быть.

Нужно блоку div задать табличное свойство. К слову сказать, вместо div это могут быть и блоки списка ul и li, как это было в моём случае.

CSS без «лишнего кода», выглядеть будет так:

ul {
    display: table;
}

ul li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Вот собственно таким образом я и решил свой вопрос с центрированием текста, как по горизонтали, так и по вертикали.

Спонсоры: