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

[paracelso]

Изъезженная тема - вертикальное выравнивание при блочной верстке. Я знаю, что есть около 6 способов выравния блоков с различными условиями, но сейчас хочу поделиться решением для случая, мне еще не встречавшегося.

Недавно столкнулся с проблемой - выровнять резиновый блок внутри фиксированного. Например...

Имеется:

.outer {
width:50px;
height:50px;
}
<div class="outer"><img class="inner"></div></div>

Требуется:

Выровнять inner внутри outter ровно по центру

Решение:

.outer {
width:25px;
height:25px;
padding:25px 0px 0px 25px;
}
.inner {
width:20px;
height:20px;
margin:-50% 0% 0% -50%;
}

Надеюсь, лишних пояснений не надо. Вероятно, скажете, "было и банально", однако я не видел, считаю нужным поделиться. Аналогично можно сделать для всех вариантов подобной задачи, думаю.

Edited November 16, 2011 by paracelso

[Gaspode]

А вы знаете, что вертикальные марджины в процентах считаются от ширины родителя, а не от его высоты?

[paracelso]

Значит, косяк. Хорошо, что для моего случая всё равно подходит

Тем не менее, решить по той же схеме все равно будет можно, но уже с использованием вложения. Элегантность решение потеряет.

Edited November 16, 2011 by paracelso

[psywalker]

А по-моему это бредовое решение, как минимум. Если я сделаю текста чуть больше, то что будет?

[paracelso]

Мы его выше уже обсудили.

Если между outer и inner сделать div.middle, то значение innera будут считаться от middle, натянутого на него. Работать будет, но я не любитель вложений.

[psywalker]

Мы его выше уже обсудили.

Если между outer и inner сделать div.middle, то значение innera будут считаться от middle, натянутого на него. Работать будет, но я не любитель вложений.

Сделай плиз готовый пример, многострочный.

[paracelso]

Работающий пример того, о чем говорилось ранее.

Со вложенностью

[psywalker]

Работающий пример того, о чем говорилось ранее.

Со вложенностью

У меня в фф нифига не выравнивается. http://jsfiddle.net/sZevk/

http://screencast.com/t/Md1Sw82tQUc

[paracelso]

Действительно. Толко заметил, в webkit'ах косяк остается. Посмотрю, мб че придумаю

В IE и опере все тип-топ.

[psywalker]

Действительно. Толко заметил, в webkit'ах косяк остается. Посмотрю, мб че придумаю

В IE и опере все тип-топ.

Добавил одну лишь букву и тип-топа и там уже нет

[paracelso]

Читай условия задачи штоле

[jumancy]

Помогите пож-та в небольшой проблеме. текст кнопки должен стоят ровно в центре (вертикально) Для этого я использовал line-height. Но почему то Firefox его не понимает. не подскажите как это исправить. Вот ссылка http://jsfiddle.net/qzDwJ/

Вариант с паддингами не предлагать, они по разному в разных браузерах

Edited November 17, 2011 by jumancy

[psywalker]

Читай условия задачи штоле

В условиях задачи сказано, что это решение должно работать. Однако я этого не наблюдаю. Смысл выкладывать то, что абсолютно криво работает, говоря, что это рабочий вариант?

[paracelso]

В решении задачи сказано, на чем и как работает решение. Аргумент, нет?

[psywalker]

В решении задачи сказано, на чем и как работает решение. Аргумент, нет?

Нет. Для меня аргумент - это работающее решение. Пустословию я перестал верить ещё в детстве.

[Undead_46]

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

line-hight или display: table-cell; + vertical-align:middle;

[psywalker]

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

line-hight или display: table-cell; + vertical-align:middle;

Да, а главное - рабочих

[Softlink]

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

line-hight или display: table-cell; + vertical-align:middle;

Из этих двух только table-cell можно отнести к универсальным. Выравнивание через line-height - это для частных случаев.

[paracelso]

Эти решения еще более частные, нежели вариант с padding, тем более, я в курсе их всех.

Я уже отписал, что в рассмотренных мною браузерах решение работает, и заметил, что не успел проверить в фф.

Слышь че, вот доказывать мне не надо, что, по-твоему, катит, а что нет - я отписал, а значит, посчитал это нужным.

[psywalker]

Эти решения еще более частные, нежели вариант с padding, тем более, я в курсе их всех.

Я уже отписал, что в рассмотренных мною браузерах решение работает, и заметил, что не успел проверить в фф.

Слышь че, вот доказывать мне не надо, что, по-твоему, катит, а что нет - я отписал, а значит, посчитал это нужным.

Никто не против того, что ты выложил, спорить с тобой тоже никто не намеривался, и не надо разговаривать с людьми в таком тоне. Ты выложил вариант, сказал, что он рабочий, я проверил - это не так. А значит твоё решение явно нерабочее. Мы не правы?

[paracelso]

Я уже отписал, что в рассмотренных мною браузерах решение работает, и заметил, что не успел проверить в фф.

Ты выложил вариант, сказал, что он рабочий

Спор глухого со слепым.