Когда необходимо отцентровывать несколько строчек текста, фотографию или любой другой элемент ровно посередине пустой страницы, то многие создают таблицу, строки и столбцы, в которые прописывают нужные значения размеров, отступов и так далее. А как насчёт CSS?
На мой взгляд наилучшим является метод с отрицательными отступами (negative margin). Довольно хороший пример сделал создатель онлайн журнала о веб-дизайне Джо Гиллеспай (Joe Gillespie). Все CSS-правила и решения находятся в исходнике страницы.
Реализация отцентровки элементов по середине страницы с помощью CSS прибавляет ещё один плюс — элементы будут всегда находиться в центре, даже, если страница заполнена контентом.
Всем хорошо только кода много, таблицами легче выходит!
2 Phenix
Ага, а ещё лучше – картинкой всё сделать, целиком всю страницу вместе с текстом 🙂
Мне уже один клиент предлагал , говорит – проще 🙂
Приём хороший, спасибо, но подразумевает что размеры контента известны заранее.
А чем плохо:
#divcenter {
position: absolute;
top: 50%;
left: 50%;
width: (X)px;
height: (Y)px;
margin-left: -(X/2 + Z + N)px;
margin-top: -(Y/2 + Z + N)px;
border: (Z)px solid black;
padding: (N)px;
background: white;
}
Center DIV
Кака вариант:
width: 400px;
height: 300px;
margin-left: -250px;
margin-top: -200px;
border: 20px solid black;
padding: 30px;
1. Кажется, имя Joe Gillespie по-русски лучше писать как Джоуи Гиллеспи (“проверочное слово” Диззи Гиллеспи, был такой великий музыкант).
2. У метода Гиллеспи есть один недостаток, если окно браузера (смотрю в Файерфоксе) сделать уже чем ширина отцентрированного блока, то этот блок уходит за левую границу окна, и полоса прокрутки при этом не может “прокрутить” его обратно.
То есть метод хорош, незаменим иногда, но годится только если центрируемый блок не очень велик, или если пользователь не будет менять размер окна.
Думаю его можно усовершенствовать.
http://www.artlebedev.ru/kovodstvo2/sections/109/