Вообще у этой проблемы есть несколько решений, самое распространённое:
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;
}
Вот собственно таким образом я и решил свой вопрос с центрированием текста, как по горизонтали, так и по вертикали.