Центрирование контента

Тема в разделе "Веб-дизайн", создана пользователем rafic, 16 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Ув. нулледци. Подскажите пожалуйста способы центрирования контента как по горизонтали, так и по вертикали. Меня не интересуют статьи из гоогла, я там был и знаю что пишут. Меня интересуют ваши личные способы которыми вы пользуетесь, которые проверены на кроссбраузерность и которые являются более универсальными.

    Лично я для выравнивания по горизонтали использую для wrapper{margin:0;}. Пока проблем не возникало. А вот для выравнивая по вертикали, я хотел бы услышать варианты вашего личного опыта.
     
  2. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    блин, размусолили такой простой топик на 4 страницы. рафик, все что вам нужно это ява-скриптом вернуть значения:
    - ширины сайта
    - высоты сайта
    - ширины окна браузера
    - высоты окна браузера.

    если высота сайта меньше высоты окна браузера - применяем стили с абсолютным позиционированием:
    HTML:
    
    <style type="text/css">
     .main-vertical{
      position: absolute;
      top: 50%;
      margin-top: -Npx;
     }
    </style>
    
    где N = 1/2 высоты сайта.
    если же высота сайта больше окна браузера - то применяете стили без абсолютного позиционирования.
    с центровкой по ширине - по аналогии. хотя для центровки по ширине имхо нафиг не нужно абсолютное позиционирование, margin-left: auto; margin-right: auto вполне достаточно в сочетании с CSS-свойством min-width и хаком, дополняющим это неработающее свойство в IE6. наизусть не помню, найдете в интернете при желании по запросу min-width ie6 css expression
     
  3. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    для нормальных браузеров:
    display: table;
    vertical-align: middle;
    (для блока, в котором будем выравнивать элементы)

    и для ie (лучше вынести в cc:(
    position:relative;
    top:expression(this.parentNode.clientHeight/2 + 'px');

    неплохая статья на эту тему:
    http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
     
Статус темы:
Закрыта.