Помощник
 |
|
|
|
|
Сообщение сайта
|
 Лучший способ выравнивания по центру страницы |
Allan Stark
|
Сообщение
#1
|
||
 0  Группа: User Сообщений: 3 Регистрация: 24.10.2008 Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
Galen
|
 24.10.2008, 20:46;
Ответить: Galen
Сообщение
#2
|
 0 Группа: User Сообщений: 1269 Регистрация: 3.10.2008 Поблагодарили: 0 раз Репутация: 0
|
|
|
|
|
|
Albert_hb
|
24.10.2008, 21:13;
Ответить: Albert_hb
Сообщение
#3
|
 0 Группа: User Сообщений: 87 Регистрация: 27.10.2007 Поблагодарили: 0 раз Репутация: 0
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Vertical Centering with a Floated Shim</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> /* <![CDATA[ */ html, body { height: 100%; /* Make sure the document takes up the whole window. */ margin: 0; /* Get rid of any default margins, which could cause the html and body elements to be larger than the window and trigger scrollbars. */ padding: 0; /* Get rid of any default padding, which could cause the html and body elements to be larger than the window and trigger scrollbars. */ } div#shim { visibility: hidden; width: 100%; height: 50%; /* Bump div#blueBox down half the height of the screen. */ margin-top: -200px; /* Half the height of div#blueBox. */ float: left; } div#blueBox { background: blue; width: 100px; margin:0 auto; height: 400px; clear: both; /* * * Issue: IE4 doesn't allow a negative margin-top. * * This code positions blueBox relatively and uses the IE4ever hack (<http://exanimo.com/css/ie4ever>) to overwrite the rule for other browsers. * The content will be centered but will crop if the window is not small enough to accommodate it. * */ position: relative; top: -200px; /* IE4ever Hack: Hide from IE4 **/ position: static; /** end hack */ } /* * * Issue: IE5mac interprets negative values as positive. * * I haven't figured out a workaround for this yet. The content won't be vertically centered but it won't be messed up by the previous code either. * */ /* Hide from IE5mac \*//*/ div#shim { display: none; } html, body { height: auto; } /* end hack */ /* ]]> */ </style> </head> <body> <div id="shim"></div> <div style="" id="blueBox">this box should be vertically centered in your browser window</div> </body> </html> |
|
|
|
|
Allan Stark
|
Сообщение
#4
|
|
0 Группа: User Сообщений: 3 Регистрация: 24.10.2008 Поблагодарили: 0 раз Репутация: 0
|
Хорошо, а теперь немного усложним задачу.
Пусть нам требуется не отпозиционировать элемент строго по центру страницы, а отпозиционировать его строго внизу по центру ? Как в этом случае извратиться ? |
|
|
|
|
Exterior
|
25.10.2008, 14:49;
Ответить: Exterior
Сообщение
#5
|
|
 0 Группа: User Сообщений: 1780 Регистрация: 15.11.2007 Поблагодарили: 0 раз Репутация: 0
|
Allan Stark,
Выравнивание по центру по вертикали и горизонтали Выравнивание страницы выравнивание по вертикали выравнивание по вертикали Выравнивание элементов Как оцентрировать таблицу Выравнивание изображения по центру блока
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Нужно ли закрывать ненужные страницы тегом noindex, follow? | 8 | noviktamw | 2916 | 2.3.2024, 12:53 автор: toplinks |
|
YoChange.com - Ваш лучший помощник в обмене цифровых валют! | 6 | Yochange | 2596 | 13.12.2023, 12:17 автор: Yochange |
|
maultalk, конечно, лучший, но... | 23 | muratastana | 5799 | 15.9.2022, 21:20 автор: Telnor |
|
Простой способ заработать на пиво за 5 минут Халява для граждан РФ |
17 | MaxChemist | 3147 | 15.9.2022, 17:42 автор: MaxChemist |
|
Сверстать страницы из figma нужно сделать страницы для веб приложения |
1 | bluestorm | 1297 | 7.6.2022, 18:11 автор: doharddocode |
|
Текстовая версия | Сейчас: 25.4.2024, 6:30 |
