Jump to content
  • 0

Вертикальное выравнивание внутри дива.


Semreg
 Share

Question

Вертикальное выравнивание внутри дива.

Научите правильно это делать кросбраузерно и именно через vertical-align: middle

Вариант с padding или line-height не подходит. :angry:

Интересует, как правильно выравнивать по вертикали текст или другой див.

Заготовил формочку:

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

<head>
<style type="text/css">

* { margin: 0; padding: 0;}

.max1 {
height : 300px;
background: red;
}

.max2 {
height : 300px;
background: black;
}

.max2 div {
height : 50px;
width : 50px;
background: green;
}

</style>
</head>

<body>

<div class="max1">
text<br>text<br>text<br>text<br>text
</div>

<div class="max2">
<div></div>
</div>

</body>
</html>

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

почитайте про "кроссбраузерное вертикальное выравнивание", там где display:table для нормальных, или экспрешн для ненормальных, или для них же костыль из трех дивов. Много инфы, правда. Влом повторяться. тут на форуме уже поднималось не один раз.

а просто диву vertical-align: middle не поркатит. vertical-align: middle работает только для ячеек таблицы и только для инлайн элементов относительно строки.

Link to comment
Share on other sites

  • 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0;}
/*————————————————————————————————*/
.case{
width:120px;
height:250px;
display:table-cell;
vertical-align:middle;
overflow:hidden;
background-color:#FFFFCC;}
/*——- это для удобства можно вынести в IEшный стиль.. как делаю я..——*/
*html .case span { display: inline-block; height: 100%; }
*html .case { display: block; }
*html .case * { vertical-align: middle; }
/*————————————————————————————————*/
.element{ width:40px; height:40px; background-color:#666666; margin:0 auto;}/*- вертикально выравнивается как ты хотел....-*/
</style>
</head>
<body>
<div class="case"><span></span><div class="element"></div></div>
</body>
</html>

Edited by alexander.parphenuyk
Link to comment
Share on other sites

  • 0

Унесёшь?

<!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>test</title>

<style type="text/css">
* {
margin: 0;
padding: 0; }


body,html { height: 100%;}

div {
display: table;
vertical-align: middle;
height: 60%;
background: red;
behavior: url('table-cell.htc'); /* что-бы работало display: table; в ИЕ */
}

div div {
display: table-cell;
vertical-align: middle;
height: 100%;
background: red;
}
</style>
</head>

<body>

<div>
<div>

111<br />111<br />111<br />111<br />
</div>
</div>

</body>
</html>

А вот и сам файлик behavior: url('table-cell.htc');

<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script language="Javascript">
function propertyChanged() {
var s = document.createElement('span');
s.innerHTML = element.innerHTML;
element.innerHTML = '';
element.appendChild(s);

element.style.display = 'block';

s.style.display = 'block';
s.style.position = 'relative';
s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';

window.onresize = function() {
s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
}
}
</script>
</public:component>

Link to comment
Share on other sites

  • 0
почитайте про "кроссбраузерное вертикальное выравнивание"...

Если не перестанешь мне <strong>Вы-кать</strong> начну к тебе так обращатсья: "Господин, Justnewone".

Заканчивай меня на "вы" называть.

Уже почти родные люди... :o

Волкер, а откеда ты кусок js-кода нарыл? Тыж вроде не рубишь в js?

Я тоже в нем не рублю. Поэтому ко всем js кускам отношусь с опаской.

Метеду проверил. Рабочая. Пасибо за пример. Сохраню в своей библиотеке.

alexander.parphenuyk, а в твоем примере чето я не разобрался...

Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял :D

Link to comment
Share on other sites

  • 0

Semreg

Если не перестанешь мне <strong>Вы-кать</strong> начну к тебе так обращатсья: "Господин, Justnewone".

Заканчивай меня на "вы" называть.

Уже почти родные люди...

Он меня тоже долго на "Вы" называл, пока я не научил его делать трёхколоночный макет :o

Волкер, а откеда ты кусок js-кода нарыл? Тыж вроде не рубишь в js?

Я тоже в нем не рублю. Поэтому ко всем js кускам отношусь с опаской.

А это мне короче мастер Great Rash дал, а он ещё тот JS-джидай :D

А вот тебе ещё пару примерчиков из моей заначки, без JS:

<!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>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: 12px Tahoma;
}
.parent {width:500px; height:400px; text-align:center; border:1px solid #dd0; background: #ffa; display: table; vertical-align: middle; }

.child {
...
display:-moz-inline-box;
display:inline-block;
display: table-cell;
vertical-align:middle;
zoom:1;
//display:inline;
}
.helper {
...
display:-moz-inline-box;
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
zoom:1;
//display:inline;

}
/* СПИСОК ТЕБЕ ЧУВАК */
ul.one { overflow: hidden; height: 50px; background: #999;}
ul.one li { height: 50px; float: left; width: 24%; text-align: center; vertical-align: middle; display: table;}
ul.one a { display: inline-block; vertical-align: middle; zoom:1; display: table-cell;}
ul.one span { display: inline-block; height: 100%; zoom:1; vertical-align: middle; width: 0;}

/* Второй список */
ul.two { height: 50px; width: 100%; display: table;}
ul.two li { float: left;display: table-cell; vertical-align: middle; height: 50px; width: 24%;}
ul.two li span {
display: table-cell;
vertical-align: middle;
height: 50px;
display: block;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}
ul.two li span a {
display: block;
text-align: center;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}
</style>
</head>

<body>
<div class="parent">
<div class="child">Текст, который заключён во внутренний блок.<br />Текст, который заключён во внутренний блок </div>
<div class="helper"></div>
</div>

<ul class="one">
<li><a href="#">Текст, который заключён</a><span></span></li>
<li><a href="#">Текст, который заключён<br />Текст, который заключён</a><span></span></li>
<li><a href="#">Текст, который заключён</a><span></span></li>
<li><a href="#">Текст, который заключён</a><span></span></li>
</ul>
<br /><br />
<ul class="two">
<li><span><a href="#">Текст, который заключён</a></span></li>
<li><span><a href="#">Текст, который заключён<br />Текст, который заключён</a></span></li>
<li><span><a href="#">Текст, который заключён</a></span></li>
<li><span><a href="#">Текст, который заключён</a></span></li>
</ul>
</body>
</html>

Edited by psywalker
Link to comment
Share on other sites

  • 0

alexander.parphenuyk, а в твоем примере чето я не разобрался...

Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял :D

:o чёта я сам гдето прое$ся где-то тут.... Ну хотябы попытался помоч....

ну с картинками внутри работает... вроде бы...

Link to comment
Share on other sites

  • 0
alexander.parphenuyk, а в твоем примере чето я не разобрался...

Как-то он глючно работает и не кросбраузерно. Может что то не там я вставлял :o

:D чёта я сам гдето прое$ся где-то тут.... Ну хотябы попытался помоч....

ну с картинками внутри работает... вроде бы...

Да нормал, я в принципе твою мысль понял, способ тоесть :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy