youmee9 июн 2008 в 07:32

Центрирование в DIV. Both. Vertical & Horizontal. Unknown w&h

1 мин

885

Чулан

-1

Комментарии 17

dmx 9 июн 2008 в 08:20

Что-то вроде этого?
http://www.jakpsatweb.cz/css/css-vertica…

Только в чем проблема возникла при совмещении вертикальной центровки с горизонтальной?

Какие способы нашли вертикальной центровки, можно ссылки?

И ещё если нужно просто рисунок отобразить, то можно попробовать его задать как background у div и отцентровать. Все от конкретной задачи зависит.

youmee 9 июн 2008 в 08:24

можно было бы конечно и бекграундом, но там много разных картинок, которые легче просто IMG`ом добавить в div. Спрособы пробовал разные:

display: table-cell; vertical-align: middle. (работало, но горизонтально не получалось) и помоему не кроссбраузерно.

dmx 9 июн 2008 в 08:26

Там где я привел ссылку обещают кроссбраузерно, вроде, но там только по вертикали.
Вот ещё нашел http://www.yanajy.com/sdelay-sam/horison…
Сори, я сейчас сам не могу проверить, так как уходить нужно. Будет время - потестирую сам.

youmee 9 июн 2008 в 08:36

к сожалению не помогло((( т.е. работает в Opere и FF, но только вертикально((

XXXVII 9 июн 2008 в 08:39

display: table-cell не работает в IE, однако можно это исправить с помощью jvascript

youmee 9 июн 2008 в 08:42

да, вот только хотелось бы без скриптов(, конечно легче сделать:

с выравниванием в css. но это так некрасиво смотрится на фоне многочисленных Div'ов. :(

youmee 9 июн 2008 в 08:43

чёрт.. писал там html код, забыл что он не парсится

arestov 9 июн 2008 в 08:44

Если вы внимательней прочитаете про vertical-align, то узнаете ,что свойство предназначено для вертикального выравнивания внутри строки. Т.к. img- строчный элемент, то на него дейстует это правило.

Удачно применить его получится если в ваш div вставляется только img или всего одна строчка чего-то: выставляете line-height и height равными и добавляете vertical-align: middle. В этом же случае сработает tex-align

youmee 9 июн 2008 в 08:53

да, ваш способ действительно действует, но vertical-align к сожалению не работает в IE.



.container {

   display: table-cell;

   width: 150px;

   height: 150px;

   line-height: 150px;

   border: 1px solid red;

   vertical-align: middle;

   text-align: center;

}



<div class="container"><img src="image"></div>