Таблица по центру монитора

udick · June 9, 2011

Здравствуйте, форумчане!

Не знаю, как правильно поставить корректно вопрос, но думаю, что вы поймёте. Как сделать, дабы таблица была выравнена по центру и по вертикале, то бишь чтобы была по центру экрана.

Int · June 9, 2011

По центру монитора независимо от положения окна браузера? Только яваскриптом. Используй screen.width и screen.height, дели пополам, вычитай половину ширины и высоты твоего сайта, будет у тебя по центру монитора.

Выравнивание по центру браузера сделать чуть проще. Хотя с вертикальным выравниванием на css нужно малость помучиться. Обычно делают что-то типа top:50%;margin-top:-50%. Но чтобы margin сработал правильно, нужно будет какого-то родителя наверное создать. Яваскриптом получится быстрее. Загугли как посчитать высоту блока.

Softlink · June 9, 2011

По центру монитора независимо от положения окна браузера? Только яваскриптом. Используй screen.width и screen.height, дели пополам, вычитай половину ширины и высоты твоего сайта, будет у тебя по центру монитора.
Выравнивание по центру браузера сделать чуть проще. Хотя с вертикальным выравниванием на css нужно малость помучиться. Обычно делают что-то типа top:50%;margin-top:-50%. Но чтобы margin сработал правильно, нужно будет какого-то родителя наверное создать. Яваскриптом получится быстрее. Загугли как посчитать высоту блока.

а vertical-align:middle не?

udick · June 9, 2011

Ребят, можно и без яваскриптов. Я как-то находит на просторах интернета код, там присутствовал HTML и CSS. У Артемия Лебедева на сайте на подобии: http://tema.ru, но я видел и легче код, только уже забыл где.

buddah · June 9, 2011

У Артемия Лебедева на сайте на подобии: http://tema.ru, но я видел и легче код, только уже забыл где.

Куда уж легче? Там таблица и vertical-align

А я вот не могу вспомнить, где видел элегантное решение для блоков only css. Помню что там использовался так званый "горизонт" от которого уже все плясало (relative блоки). Получалось всунуть блок точно по центру браузера. Еще надпись такая была "deadly fixed type" или что-то такое...Никто не встречал?

Edited June 9, 2011 by buddah

sigma77 · June 9, 2011

Встречала такой способ (выкладываю as is, т.к. немного почистить его не помешает)


<!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>Vertical-align elements of unknown height</title>
<style type="text/css">
.imageholder {
	position:relative;
	display:table;
	height: 449px;
	width: 615px;
	vertical-align: middle; 
	text-align: center;
	border: 1px solid #CCCCCC;
	background:red;
	text-align:center;
}
.inner {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	position:relative;
	text-align:center;
}
.inner img{
	display:inline;
	vertical-align:middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%;	position:relative;display:block}
</style>
<![endif]-->


</head>
<body>
<h1>Vertical align elements of different heights (based on xerxos's method)</h1>
<div class="imageholder"> 
  <div class="inner"><img src="photo-1.jpg" width="100" height="67" alt="Image vertically centred" /></div>

</div>
<div class="imageholder"> 
  <div class="inner"><img src="photo-2.jpg" width="150" height="97" alt="Image vertically centred" /></div>
</div>
</body>
</html>

Есть еще способ Great Rash'a - Верстка дивами. Выравнивание по вертикали

Shift-Web · June 9, 2011

margin: auto; ?

Int · June 9, 2011

Авто вертикально же не отработает вроде. А вот display:table(-cell?)- это да, забыл я про него.

Sign In

Таблица по центру монитора

Question

udick

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

udick

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Shift-Web

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information