Когда дело доходит до центрирования вещей в веб-дизайне, чем больше у вас информации о центрируемом элементе и его родительском элементе. Центрирование сложно, потому что это зависит от того, что вы пытаетесь центрировать. Давайте посмотрим на CSS элементов, которые будут центрированы, основываясь на контенте.
Таблицы визуализируются немного иначе, чем обычный div уровня блока. Например, вещь шириной 100%. Таблица будет растягиваться только настолько, насколько это необходимо для содержимого внутри нее, тогда как по умолчанию элемент уровня блока будет расширяться до ширины своего родителя автоматически.
Текст:
Текст центрируется с помощью выравнивания текста: если вы хотите, чтобы это было с любой стороны, используйте левую или правую вместо центра.
Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align:
Код
p.center { text-align: center; }
С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.
Применения этого класса:
Код
<p class="center">This text is centered.</p>
При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.
Содержание:
DIV или любой другой элемент может быть центрирован, добавив свойство блока к нему, а затем с помощью авто полей.
CSS будет выглядеть так:
Код
#div1 {
display: block;
margin: auto;
width: anything under 100%
}
Причина, по которой я поместил «что-то под 100%» для ширины, заключается в том, что если бы она была шириной 100%, то если бы она была полной шириной и не требовала центрирования. Лучше иметь фиксированную ширину, например, 60% или 550 пикселей.
