Центрирование на экране фиксированного элемента

MageMerlin · October 20, 2009

Есть див с заранее известными шириной и высотой. Подскажите, как его отцентрировать на экране по вертикали и горизонтали на любом разрешении монитора? Насчет вертикальной центрации - можно забить в принципе, но очень хочется, а горизонтальная критически необходима. Браузеры все.

Слой имеет position:absolute;

Edited October 20, 2009 by MageMerlin

s0rr0w · October 20, 2009

Есть див с заранее известными шириной и высотой. Подскажите, как его отцентрировать на экране по вертикали и горизонтали на любом разрешении монитора? Насчет вертикальной центрации - можно забить в принципе, но очень хочется, а горизонтальная критически необходима. Браузеры все.
Слой имеет position:absolute;

JavaScript в помощь.

MageMerlin · October 20, 2009

Яваскрипт не катит, хочется решения построенного на CSS | HTML

Spidey · October 20, 2009

Есть див с заранее известными шириной и высотой. Подскажите, как его отцентрировать на экране по вертикали и горизонтали на любом разрешении монитора? Насчет вертикальной центрации - можно забить в принципе, но очень хочется, а горизонтальная критически необходима. Браузеры все.
Слой имеет position:absolute;

попробуй этот див заключить в тег center

psywalker · October 21, 2009

Не понял, при чём тут JS? :unsure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centr</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -153px;
				margin-left: -255px;

				border: 1px solid #000;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
						span.right { position: absolute; right: 0; top: 105px;}
						span.left { position: absolute; left: 0; top: 105px;}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			<span class="top"></span>
			<span class="cent"></span>
			<span class="bottom"></span>
		</div>
		<span class="right"></span>
		<span class="left"></span>
	</div>
</body>
</html>

Searcher · October 21, 2009

полная отцентровка и по горизонтали и по вертикали

rus · October 21, 2009

Дык ведь можно и без абсолюта обойтись, автор сказал что ему начхать на выравнивание по вертикали, а по горизонтали будет: margin:0 auto; - но это без абсолютного позиционирования, если с ним, то не получится конеш.

Searcher · October 21, 2009

если ему абсолютное позиционирование не принципиально, то самое оно.

asdfg · January 16, 2010

полная отцентровка и по горизонтали и по вертикали

При изменении размера окна текст пропадает!

Justnewone · January 16, 2010

При изменении размера окна текст пропадает!

так и должно быть, абсолютный элемент беспрокруточно прячется налево и наверх. Как относительное решение - мин-видт.

asdfg · January 16, 2010

так и должно быть, абсолютный элемент беспрокруточно прячется налево и наверх. Как относительное решение - мин-видт.

Прошу прощения за настойчивость. Никак не могу разобраться.

Нельзя ли по подробнее, где нужно написать "мин-видт", чтобы этот блок никогда не прятался.

Сделал так.

#content

{

font-family: Verdana, Geneva, Arial, sans-serif;

background-color: #f00;

margin-left: -150px;

position: absolute;

top: -35px;

left: 50%;

width: 300px;

min-width: 300px;

height: 70px;

min-height: 70px;

visibility: visible

}

Ничего не изменилось.

psywalker · January 16, 2010

Прошу прощения за настойчивость. Никак не могу разобраться.
Нельзя ли по подробнее, где нужно написать "мин-видт", чтобы этот блок никогда не прятался.
Сделал так.
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -150px;
position: absolute;
top: -35px;
left: 50%;
width: 300px;
min-width: 300px;
height: 70px;
min-height: 70px;
visibility: visible
}
Ничего не изменилось.

Напиши у боди

Justnewone · January 16, 2010

Прошу прощения за настойчивость. Никак не могу разобраться.
Нельзя ли по подробнее, где нужно написать "мин-видт", чтобы этот блок никогда не прятался.
Сделал так.
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -150px;
position: absolute;
top: -35px;
left: 50%;
width: 300px;
min-width: 300px;
height: 70px;
min-height: 70px;
visibility: visible
}
Ничего не изменилось.

Мин-видт надо повесть на обрамляющй #content элемент, ну или, даже наверное более правильно, прям на body. Но наверх все равно прятаться будет, хотя играются высотой мало людей, пользователь не обнаружит, что блок спрятан, если это не произойдет сразу же при открытии. если надо чтоб наверз не прятался, попродуйте поиграться верхним маргином или паддингом у одного из обрамляющих блоков. Вобщем, опыт сын эксперимента =)

asdfg · January 16, 2010

Мин-видт надо повесть на обрамляющй #content элемент, ну или, даже наверное более правильно, прям на body. Но наверх все равно прятаться будет, хотя играются высотой мало людей, пользователь не обнаружит, что блок спрятан, если это не произойдет сразу же при открытии. если надо чтоб наверз не прятался, попродуйте поиграться верхним маргином или паддингом у одного из обрамляющих блоков. Вобщем, опыт сын эксперимента =)

Огромное спасибо за ответы!

Напиши у боди

Спасибо!

Sign In

Центрирование на экране фиксированного элемента

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information