бокс по центру экрана

bFree · November 8, 2008

Есть бокс, который выравнен по центру экрана, однако, если заполнять бокс инфой, то он "устремляется вниз", т.е. свеху пусто, а от центра экрана вниз идет бокс. Возможно ли его всегда выравнивать по центру?

DjTarik · November 8, 2008

возможно...

bFree · November 8, 2008

подробнее, пожалуйста

DjTarik · November 8, 2008

Код в студию... И поподробнее - что именно надо...

klierik · November 9, 2008

а лучше выложить пример с нет )))

Ялекс · November 9, 2008

Попробуй: margin-top:-50%;

А вообще конечно код нужен.

Edited November 9, 2008 by Ялекс

bFree · November 9, 2008

.box {
	position:fixed;
	width: 34%;
	background-color:#c3f6ff;
	border: 1px solid #02aecd;
	padding: 1%;
	margin: 25% 32%;
}

понимаю, что это криво, но как вышло \=

буду признателен, если поправите

Azadi · November 10, 2008

Вижу 2 решения проблемы:

1). Для нормальных браузеров пишем display:table; display:table-cell; и т.п., а для IE6 используем expression'ы для отсчитывания отступов сверху и снизу при изменении высоты блока.

2). Загнать блок в таблицу и не мучиться.

Еще можно поискать какой-нибудь скрипт, который бы выравнивал блок по центру окна.

Я бы загнал блок в таблицу и не мучился с IE...

<!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" />

<style type="text/css">
* {
	padding:0;
	margin:0;
	border:0;
}
HTML,BODY {
	height:100%;
}
.center {
	vertical-align:middle;
	width:100%;
	height:100%;
	text-align:center;
}
.wrap {
	width:34%;
	background-color:#c3f6ff;
	text-align:center;
	margin:0 auto;
}
</style>

<title>Title</title>
</head>

<body>
<table class="center">
	<tr>
		<td>
			<div class="wrap">
				<p>Text text text</p>
				<p>Text text text</p>
				<p>Text text text</p>
				<p>Text text text</p>
				<p>Text text text</p>
			</div>
		</td>	
	</tr>
</table>
</body>
</html>

bFree · November 12, 2008

Azadi, спасибо!

XAOPT · November 13, 2008

Попробуйте

<div id="bla" style="border: solid 1px #000; width: 200px; position: absolute;">
zxczxczxc
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<script>
var bbla = document.getElementById("bla");
bbla.style.left = "50%"
bbla.style.top = "50%"
var bblaleft = bbla.offsetLeft
bbla.style.left = bblaleft - bbla.offsetWidth/2
var bblatop = bbla.offsetTop
bbla.style.top = bblatop - bbla.offsetHeight/2
</script>

Edited November 13, 2008 by XAOPT

Sign In

бокс по центру экрана

Question

bFree

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

DjTarik

Link to comment

Share on other sites

bFree

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Ялекс

Link to comment

Share on other sites

bFree

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

bFree

Link to comment

Share on other sites

XAOPT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information