Отцентрировать аблолютно позиционированный элемент
имеется табличка, для которой применен стиль:
position:absolut
больше на странице элементов нет, но необходимо эту табличку расположить строго по центру. Как это можно сделать?
Заранее спасибо)
position:absolut
больше на странице элементов нет, но необходимо эту табличку расположить строго по центру. Как это можно сделать?
Заранее спасибо)
Мне, конечно, не совсем понятно, для чего нужно абсолютно спозиционированный элемент еще и центрировать. И какое, вообще, центрирование нужно -- горизонтальное, вертикальное, или то и другое.
Тем не менее, вот две ссылки: вертикальное и горизонтальное центрирование блока и центрирование блока без указания его ширины
Тем не менее, вот две ссылки: вертикальное и горизонтальное центрирование блока и центрирование блока без указания его ширины
Это нужно было потому что страничка некорректно отображается если элемент позиционирован не абсолютно - там вобщем долго обЪяснять.
Спасибо
Спасибо
А не надо долго объяснять - код покажите, здесь люди понятливые ;)
Цитата: jbast
имеется табличка, для которой применен стиль:
position:absolut
больше на странице элементов нет, но необходимо эту табличку расположить строго по центру. Как это можно сделать?
Заранее спасибо)
position:absolut
больше на странице элементов нет, но необходимо эту табличку расположить строго по центру. Как это можно сделать?
Заранее спасибо)
Абсолютное позиционирование блока в CSS осуществляется внутри родительского блока. Исходя из этого заключаем твою табличку в div, находящийся в "нормальном" потоке (т.е. не позиционируемый) и делаем для него margin-left: auto; и margin-right: auto;. Тогда все нормальные (кроме IE, разумеется :p) браузеры будут отображать этот блок посередине области просмотра (что и дают автоматические поля).
Цитата: e1vin
Абсолютное позиционирование блока в CSS осуществляется внутри родительского блока. Исходя из этого заключаем твою табличку в div, находящийся в "нормальном" потоке (т.е. не позиционируемый) и делаем для него margin-left: auto; и margin-right: auto;. Тогда все нормальные (кроме IE, разумеется :p) браузеры будут отображать этот блок посередине области просмотра (что и дают автоматические поля).
Забыл сказать народу, что центрирование блоков типа
Код:
margin: 0 auto;
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/HTML]
В соответствующих стандарту браузерах оно работает в любом режиме. ЕМНИП. А вообще, конечно, ты прав. Только это, как бы, должно быть само собой разумеющимся - указвать DTD в начале документа.
может я извращенец, но вчера сделал так:
далее:
<span class="div0" id="div0">
(здесь абсолютно позиц. эл.)
</span>
и
Код:
function left()
{
q=screen.width;
q=Math.floor((q-800)/2);
div0.style.left=div0.style.left+q;
}
{
q=screen.width;
q=Math.floor((q-800)/2);
div0.style.left=div0.style.left+q;
}
далее:
<span class="div0" id="div0">
(здесь абсолютно позиц. эл.)
</span>
и
Код:
.div0 {
Border-style: none;
Display: block;
Visibility: visible;
Position: absolute;
Top: 0px; Left: 0px;
{
Border-style: none;
Display: block;
Visibility: visible;
Position: absolute;
Top: 0px; Left: 0px;
{
Далеко не факт, что у пользователя включен JS.
отсутствия JS в условии нет :Р
:)
:)
Есть вполне работоспособные варианты и без JS.
Что-то вроде этого (работает вроде везде)
[HTML]<style type="text/css">
body{
margin:0;
padding:0;
width:100%;
height:100%;
text-align:center;
}
#container{
margin:0;
padding:0;
width:100%;
position:relative;
}
#centered{
width:300px;
height:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
#absolutePos{
top:0; left: 0;
position:absolute;
width:300px;
height:100px;
background-color:#000;
color:#fff;
}
</style>
<div id="container">
<div id="centered">
<div id="absolutePos">
Абсолютно позиционированный элемент
</div>
</div>
</div>
[/HTML]
[HTML]<style type="text/css">
body{
margin:0;
padding:0;
width:100%;
height:100%;
text-align:center;
}
#container{
margin:0;
padding:0;
width:100%;
position:relative;
}
#centered{
width:300px;
height:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
#absolutePos{
top:0; left: 0;
position:absolute;
width:300px;
height:100px;
background-color:#000;
color:#fff;
}
</style>
<div id="container">
<div id="centered">
<div id="absolutePos">
Абсолютно позиционированный элемент
</div>
</div>
</div>
[/HTML]