umade.ru

CSS: точно посередине страницы

Когда необходимо отцентровывать несколько строчек текста, фотографию или любой другой элемент ровно посередине пустой страницы, то многие создают таблицу, строки и столбцы, в которые прописывают нужные значения размеров, отступов и так далее. А как насчёт CSS?

На мой взгляд наилучшим является метод с отрицательными отступами (negative margin). Довольно хороший пример сделал создатель онлайн журнала о веб-дизайне Джо Гиллеспай (Joe Gillespie). Все CSS-правила и решения находятся в исходнике страницы.

Реализация отцентровки элементов по середине страницы с помощью CSS прибавляет ещё один плюс — элементы будут всегда находиться в центре, даже, если страница заполнена контентом.

Всего оставлено 6 комментариев

  1. Phenix 2 октября 2004

    Всем хорошо только кода много, таблицами легче выходит!

  2. Denny 4 октября 2004

    2 Phenix
    Ага, а ещё лучше – картинкой всё сделать, целиком всю страницу вместе с текстом :-)
    Мне уже один клиент предлагал , говорит – проще :-)

  3. Yukki Pospel 6 октября 2004

    Приём хороший, спасибо, но подразумевает что размеры контента известны заранее.

  4. kbept 7 октября 2004

    А чем плохо:
    #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;

  5. uggallery 14 октября 2004

    1. Кажется, имя Joe Gillespie по-русски лучше писать как Джоуи Гиллеспи (“проверочное слово” Диззи Гиллеспи, был такой великий музыкант).

    2. У метода Гиллеспи есть один недостаток, если окно браузера (смотрю в Файерфоксе) сделать уже чем ширина отцентрированного блока, то этот блок уходит за левую границу окна, и полоса прокрутки при этом не может “прокрутить” его обратно.

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

    Думаю его можно усовершенствовать.

  6. ZERZIA 21 октября 2004

    http://www.artlebedev.ru/kovodstvo2/sections/109/

Поиск по сайту

Из последнего

Архив статей и записей