Центриране на елемент по вертикала?

S

sizif

Registered
Здравейте!

Как да центрирам по вертикала на прозореца елемент (предпочитам таблица, но няма проблем да е и ДИВ) с размери 600рх на 200рх? Този елемент е цялото съдържание, а размера на прозореца е произволен...

Ако не валидирам кода резултата се получава лесно с 2 таблици една в друга, но в случая кодът трябва да се валидира.

Благодаря предварително!
 
CSS:Vertical-align;
Table:valign;
Код: 
#element {
vertical-align:top;
}
Код: 
<td valign='top'>
 
phpsessid,

Това, к ми препоръчваш не решава основния проблем, а именно, как да поставя елемента в центъра на екрана, когато не знам параметрите на прозореца... Т.е. трябва ми относително позициониране... :(

Освен това питам за центриране...

Благодаря за отговора все пак, но въпросът остава открит :)
 
а де тои пхпсесид каза

<table>
<tr>
<td align="center" valign="middle">
text
</td>
</tr>
</table>

с див е по трудно понеже ИЕ е бозав браузър
 
mute,

не питам просто за центриране, а за центриране на елемент по вертикала на целия прозорец, а това, к предлагаш не работи, пробвал съм го много пъти...

Искам да центрирам червения елемент, ако сивия фон е целия размер на екрана:

valign.jpg


Ако задам 100% височина и ширина на основната таблица, при ИЕ елемента в тази таблица ще се центрира по вертикала, но при ФФ няма да отчете височината и елемента ще остане горе. Всъщност, ще се центрира, но не и ако кода се валидира...
Не знам защо, но не иска да отчете тези 100% височина :(

Дали с див или с таблици, но ми трябва центриране при всякакъв размер на прозореца и при валидиран код...
 
Намерих нещо :)

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Hor and Vert Center</title>
<style type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>

<body>
<div id="center">Your centered box.</div>
</body>
</html>

Copy & Paste -> http://validator.w3.org/#validate_by_input

Credits: http://www.webdeveloper.com/forum/archive/index.php/t-334.html
 
Виж поста на Phrozencrew в тази тема

И ако не ти се занимава да му гледаш и кода и всичко. Ето ти кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>index</title>
<style>
html, body {height:100%;}
.valign {vertical-align: middle;}
</style>
</head>

<body bgcolor="#000000">
<table width="100%" height="100%" class="valign">
<tr>
<td style="color: white;" align="center">
ENTER
</td></tr></table>
</body>
</html>
 
adrian,

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

Сложих стандартния !DOCTYPE за хтмл + ЦСС стрикт:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

добавих и margin: 0 0 0 0;
и пак е ОК!
Не съм го прекарвал през валидатор, но и да писка малко, не е е страшно, стига да го интерпретира все така :))

Задавал съм му същите параметри н-брой пъти, не разбирам защо, но таблицата така и не се разтегляше на височина при ФФ, а сега заспива в центъра :))

Благодаря ти много + 1т!

DJCharge,

не съм пробвал кода ти, защото на adrian беше с таблици и копирах за проба първо неговия, но благодаря, че се включи по темата! :)


PP: Целият ми проблем идвал от контейнера <CENTER> пред голямата таблица... :(
И преди ми пискаше валидатора заради него, но не ми беше хрумвало, че би могло да има връзка с вертикала, а и си мислех, че така поне центрирането по хоризонтала ми е двойно подсигурено :))

Ако някой ползва таблици ето работещ код, без цсс:

<BODY>

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=100% HEIGHT=100%>
<TBODY>

<TR><TD ALIGN="CENTER" VALIGN="MIDDLE">

<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=0 WIDTH=620>
<TBODY>
<TR><TD ALIGN="CENTER" VALIGN="MIDDLE" WIDTH=620>Текст текст текст</TD></TR>
</TBODY>
</TABLE></CENTER>

</TD></TR>
</TBODY>
</TABLE></CENTER>

</BODY>
</HTML>

Кода се валидира без проблем.
Още веднъж благодаря на всички, к писаха по темата. Без вас сигурно щях да продължа да търся грешката си другаде... :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе