вертикальное выравнивание div'а внутри div'а??

ZoolooS · June 19, 2007

снова вопрос..

есть что то типа такого кода:

<div class="one">
  <div class="two">
	<a href="boo.htm"><img src="boo.gif" /></a>
  </div>
  <div class="three">
	<ul><li>boo</li></ul>
  </div>
</div>

и к нему CSS

.one {width: 600px; height: 85px;}
.two {width: 180px; height: 85px;}
.three {height: 85px;}

Меня интересует как картинку и список выровнять вертикально по центру (их габариты не известны)..

musulman · June 19, 2007

а маргинами не получиться лол не знаю просто так предложил

маргин-топ: 50%;

маргин-боттон: 50%;

не пробывал. Лучше подожать пока ктонить из местных гуру ответит

а и вас не устравивает просто сделать маргинвсем задать допустим 5px то же может покажится бредом , но думаю все так начинали

ZoolooS · June 19, 2007

1. хм.. процентами не канает.. т.к. картинки очень разные по высоте.. подгонять все под один размер.. это зло..

2. маргинами тоже не работает.. по горизонтали значение auto работает, а по вертикали нет.

3. фиксированный маргин не подходит по той же причине, что и в п.1

ps. и вообще.. я зол.. нафиг спрашивается vertical-align, если он работает только для плэйн-текста, а для боксовых элементов не пашет?

Scrum · June 19, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  .one {width: 600px; height: 85px; border: 1px solid silver;}
	#two {width: 180px; height: 85px; border: 1px solid olive;}
	#two {
	text-align: center;
	display:table-cell;
	vertical-align:middle;
	}
	#two img {
	  margin-top: expression(((two.offsetHeight/2)
	-parseInt(offsetHeight)/2)  <0 ? "0" :
	(two.offsetHeight/2)
	-(parseInt(offsetHeight)/2) +'px');
	}


.three {height: 85px; border: 1px dashed red;}
  /*]]>*/
  </style>
</head>

<body>
<div class="one">
  <div id="two">
	<a href="boo.htm"><img src="boo.gif" /></a>
  </div>
  <div class="three">
	<ul><li>boo</li></ul>
  </div>
</div>
</body>

</html>

для списка думаю по аналогии.

musulman · June 19, 2007

аха и еще бесит то , что text-align работает не во всех браузерах

ZoolooS · June 19, 2007

хм.. а бех экспрешнсов никак?

может кто-нить другие методы знает?

musulman · June 19, 2007

привет Scrum.

От куда такие познаия :

-parseInt(offsetHeight)/2) <0 ? "0" :

(two.offsetHeight/2)

-(parseInt(offsetHeight)/2) +'px'

от куда не когда не видел такое

это входив в CSS ?

Scrum · June 19, 2007

хм.. а бех экспрешнсов никак?
может кто-нить другие методы знает?

никак.

как только когда габариты известны.

ZoolooS · June 19, 2007

мдя.. ладно.. часок подожду.. может у когонить идеи появятся.. потом в таблицу переделаю не люблю я экспрешенсы %)

Tokolist · June 19, 2007

Вот моя подборка на все случаи жизни

http://cssing.org.ua/2007/04/26/another-css-valign-method/

http://cssing.org.ua/2005/07/14/vertical-align-middle/

http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

но таблицами конечно проще

klierik · October 11, 2007

помню как-то и у меня возникла подобная проблема.

бывал и на вышеуказанных ссылках... и не сразу въехал что к чему.

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

и с минимальным кодом соответственно

вот что вышло:

css:

html, body {
 height: 100%;
 padding: 0px;
 margin: 0px;
}
/*** v-align object ***/
.valign { /* main container */
 /*width: 640px;*/
 /*height: 480px;*/
 height: 100%;
 width: 100%;

/* border: 1px solid red;*/
 background: #eee;

 display: table;
 text-align: center;
 vertical-align: middle;
}
/** object holder **/
.valign .object-holder { /* sub container */
 display: table-cell;
 background: red;
/* border: 1px solid transparent;*/
 vertical-align: middle;
 height: 100%;
}
.valign .object {
 margin: 0 auto;
 /*width: 64px;*/
 /*height: 48px;*/
 background: #aeaeae;
 border: 1px solid #fff;
 margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<=0 ? '0px':(parentNode.offsetHeight/2 - this.offsetHeight/2));
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>Untitled Document</title>
 <link href="css/v-align.css" type="text/css" rel="stylesheet">
</head>

<body>


 <!-- v-align -->
 <div class="valign">

 <!-- object holder -->
 <div class="object-holder">

 <!-- object -->
 <div class="object">

 <!-- content -->
 <h1>Greeeeeeeeeeeeeeeeeeeeeeeeeeko</h1>

 </div>

 </div>

 </div>
 <!-- /v-align -->

</body>
</html>

сразу скажу что я не претендую на идилию кода и так же не кричу что придумал его я от А до Я

просто перечитав парочку статей я написал вышеуказаный код так как мне то было удобно

и главное я хотел добиться того, что бы все было динамично и локально и не надо было ориентироваться на ID.

в общем любому разработчику который с этим сталкивался, приведенный код врятли нужен, а вот

подростающим новичкам думаю он может вполне пригодиться в их познании HTMl

mixar · February 1, 2008

А я вот наткнулся на статью, где написано как без экспрешенов сделать и вдобавок кроссбраузерно: Горизонтальное и вертикальное центрирование контейнера.

sock4proxy · May 26, 2008

css:

	margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<=0 ? '0px':(parentNode.offsetHeight/2 - this.offsetHeight/2));
}

что то у меня с математикой плохо :lol:

подскажите, как в данном случае выровнять по низу а не по середине

margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<=0 ? '0px':(parentNode.offsetHeight - this.offsetHeight));

при таком варианте, вниз содержимое уходит, но при изменении размеров окна никуда не движется

Sign In

вертикальное выравнивание div'а внутри div'а??

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information