| |
|
|
| | Вот пример кода.
http://balabolov.net/test.html
Есть чёрный блок, нужно внутри этого дива, все элементы выравнять в центр по вертикали и горизонтали.
Вот сам код
<style type="text/css">
div#main{
background-color: #000;
text-align: left;
height:80px;
width: 1000px;
margin: 0 auto;
color:#fff;
}
div.conteiner{
display:table;
height:100%;
width:100%;
#vertical-align:middle;
}
div.conteiner_2{
display:table-cell;
#vertical-align:middle;
}
div.conteiner_3{
float:left;
left:50%;
position:relative;
}
div.vline{
border-right: 2px solid #ff0000;
height: 20px;
float:left;
left:-50%;
position:relative;
margin:0 auto;
}
div.content_h{
float:left;
margin-left:8px;
margin-right:8px;
left:-50%;
position:relative;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->
<div id="main">
<div class="conteiner">
<div class="conteiner_2">
<div class="conteiner_3">
<div class="content_h">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
</div>
<div class="vline" ></div>
<div class="content_h">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
</div>
<div class="vline" ></div>
<div class="content_h">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
</div>
</div>
</div>
</div>
</div>
|
Если возможно расскажите, как правильно сделать такое выравнивание.
Заранее благодарен. | |
| |
|
|
| |
|
|
| |
для: dima_s_d_s
(02.05.2009 в 03:25)
| | | Надо раскоментировать vertical-align :
div.conteiner_2{
display:table-cell;
vertical-align:middle;
}
|
P. S. Всем советую применять Firebug для Mozilla Firefox. http://getfirebug.com/. В IE не проверял, т. к. его нету в линуксе к сожалению. | |
| |
|
|
| |
|
|
| |
для: георгий
(03.05.2009 в 22:00)
| | | Вы не поняли, это я закомментировал.так как в этом случаи выравнивается весь блок, а мне нужно каждый элемент. | |
| |
|
|
| |
|
|
| |
для: dima_s_d_s
(02.05.2009 в 03:25)
| | | Вы стили свои пишете "для работы" или исключительно "за ради удовольствия"?
Если - "для того, чтобы работало", то... узнать в "стандарте" w3c о том, что у свойства display есть какое-то РЕКОМЕНДУЕМОЕ значение типа table или table-cell - это только ПОЛОВИНА дела.
Вторая половина дела - САМАЯ ВАЖНАЯ -это узнать, а какие из версий каких браузеров эти "нестандартные" значения поддерживают.
Зайдите, например, на официальный сайт Mozilla и вы там узнаете, что БОЛЬШИНСТВО браузеров ваши изыски просто ПРОИГНОРИРУЮТ, ибо рекомендации w3c так и остались исключительно В ТЕОРИИ - https://developer.mozilla.org/en/CSS/display.
Зайдите на официальный сайт Майкрософта - и там тоже узнаете, что эти значения поддерживает только лишь новейшая восьмая версия MSIE - http://msdn.microsoft.com/en-us/library/ms533736(VS.85).aspx.
И ещё. Даже если какой-то из браузеров и поддержит значение display: table для тега <DIV> - это совершенно не означает, что тег <DIV> у вас фактически превратился в тег <TD> и потому к нему можно применить свойство vertical-align. Не применяется это свойство к тегам <DIV> НИ ПРИ КАКИХ УСЛОВИЯХ НИ В ОДНОМ БРАУЗЕРЕ.
Ну а если "за ради удовольствия" вы свои стили пишете - то тогда всё это можете не читать. Пишите - что хотите. Могу даже порекомендовать совершенно НОВОЕ значение для свойства display, например, Красиво смотрится такая запись, не правда ли? А то, что работать не будет - совсем ведь для вас неважно, так? Ведь vertical-align тоже не работает, но вы ведь его прописываете:-) | |
| |
|
|
| |
|
|
| |
для: PAT
(03.05.2009 в 23:12)
| | | Критика, критика, одна критика. А зря. Если бы я хотел услышать критику, не создавал бы тему на форуме по программированию и не только. А создал на каком нибудь форуме где много тарахтушек а толку мало.
Лучше бы рассказали как это решается, что лучше применять. Ведь делают сайты полностью построенные на div-ах. | |
| |
|
|
| |
|
|
| |
для: dima_s_d_s
(05.05.2009 в 01:55)
| | | >Ведь делают сайты полностью построенные на div-ах
Ваша задача - "сделать сайт" или же - "именно на div-ах"?
>Лучше бы рассказали как это решается
Может быть, лучше вы нам расскажете, как штаны одевать через голову?
Или - как гадить в почтовый ящик?
Или - как удалять гланды через анус?
Ведь это всё в принципе же возможно...
Делают "на div-ах" тогда, когда это, во-первых, действительно НЕОБХОДИМО.
Во-вторых, делают это тогда, когда это ВОЗМОЖНО.
В-третьих, делают это те, кто это УМЕЕТ делать.
Исходя из того, что критерий "во-вторых" вам неизвестен; и исходя из того, что к "третьим" вы явно не относитесь, делаю вывод, что и "во-первых" НИКАКОЙ необходимости НЕТ.
И никогда её и НЕ БЫЛО.
А есть дурь.
Точно такая же, коя присутствет у человека, который чешет правое ухо левой пяткой...
Вы не обижайтесь.
Ибо на правду обижаться не стОит. | |
| |
|
|
| |
|
|
| |
для: PAT
(05.05.2009 в 03:30)
| | | Опять двадцать пять. Короче ладно, нашелся один умный .....
Не надо мусорить, не знаешь решения, молчи, нет решения так и скажи. Без лишних не уважительны реплик.
PS: как по мне таким людям на форуме не место, уж больно не сдержанные. | |
| |
|
|
