Автор: Крис Койер
Перевод: Всеволод Козлов
В связи с большим количеством вопросов относительно того, как выровнять какой-либо объект по центру веб-страницы, я и решил написать данный мануал.
Я привожу решение как для адекватных браузеров, так и для Internet Explorer 6!
Многие используют следующие неработающие стили для выравнивания по центру:
.centered {
position: fixed;
top: 50%;
left: 50%;
}
В случае использования этих стилей мы получим следующее:
Чтобы все получилось, нам необходимо написать следующие стили:
1. Для адекватных браузеров
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
2. Для Internet Explorer 6
* html .centered {position:absolute;}
А вот и результат:
Оригинал статьи: Quick CSS Trick: How To Center an Object Exactly In The Center
Смотрите также:
- Скрипт галереи
- Prestashop шаблоны
- Jquery скрипты
- Создание логотипа
- Текстуры
- Jquery всплывающие подсказки
- Jquery плагины
- Шаблоны сайтов css
- Иконки для рабочего стола
- Бесплатные шаблоны сайтов HTML css
12 комментария(-ев)
[...]W3school учит как центрировать объекты используя CSS[...]
Ну это когда известны размеры объекта, а вот если не известно?!
О спасибочки!пригодится!
Я всегда пользовался выравниванием любых объектов и любого размера таблицей. Для меня это, кажеться, самым простым и эффективным вариантом!
SlaviO, здесь описано несколько методов. А также, какие «недокументированные особенности» есть у представленного здесь метода.
[...] Гуляя по Internet, совершенно случайно натолкнулся на статью «Стили CSS — центрируем объекты по центру веб-страницы». [...]
Действенны способ, НО при уменьшение размера окна браузера, выравненый объект остаетса неподвижным, т.е остаетса тамже где и был.
Как решить данную проблему?
.centered {
position: absolute;
top: 50%;
left: 50%;
}
А обертывающему блоку задать position: relative;
SAIGAK, еще нужно задать отрицательные левую и верхнюю границы в половину ширины и высоты центрируемого объекта
SlaviO — пиши жабаскрипт, когда размеры неизвестны
JavaScript — это поведенческая модель; использвать JavaScript для создания визуальных костылей совсем не comme il faut.
Пасип. это конешн красиво. автор Мужик!