Выравнивание CSS по вертикали внутри контейнера минимальной высоты?

Question

Выравнивание CSS по вертикали внутри контейнера минимальной высоты?

Я много искал и не могу найти решение css для вертикального выравнивания моего контента.

Все решения, которые я вижу здесь, в SO и в лучших статьях в Google, требуют, чтобы у меня был контейнер фиксированной высоты, который не может превышать содержимое. Я не могу гарантировать этого, поскольку контент создается динамически.

Единственный запасной вариант, с которым я могу работать, - это некоторый javascript для программного измерения внутреннего контейнера и установки его верхнего края. Это действительно неприятный, но единственный способ, который, кажется, работает. : (

См. this js fiddle для примера разметки, которую я хочу стилизовать.

Я счастлив забыть об IE6 для этого, но мне нужно поддерживать IE7 + и последнюю версию webkit + firefox. ..

Кто-нибудь знает о решении этой проблемы только с помощью CSS?

6

html css html5 css3

задан Chris 13 December 2011 в 12:20

1 ответ

Другие вопросы по тегам:

html css html5 css3

Похожие вопросы:

score 0 · Answer 1

Это - мой первый ответ, но надо надеяться он помогает!

* {
  font-size: 9px;
}

#container{
    border: 3px solid black;
    text-align:center;
    min-height: 200px;
}

.valign_outer{
}

.valign_inner{
  padding-top: calc( (200px - 9px) * 1.2) ;
  padding-bottom: calc( (200px - 9px) * 1.2);
}

можно установить любой размер шрифта.

можно установить любую минимальную высоту.

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

можно восстановить это вычисления для различных Мультимедийных запросов.

вычисление: calc ((минимальная ширина - размер шрифта) * дополнительный множитель)

Удостоверяются, что дополнительный множитель - по крайней мере 0,5 на обоих.

Это - логика:

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

И шрифт - изменяют размер, не всегда лучше всего: мы можем хотеть некоторые блокировки CSS: см. https://fvsch.com/css-locks /

Так, мы не можем определить высоту контейнера. Но, мы можем определить минимальную высоту.

Так, текст собирается занять некоторый размер и центрировать его, мы хотим тот же padding-top и дополнительную нижнюю часть

Теперь, то дополнение лучше определяется на основе размера шрифта. Если шрифт составляет 20 пкс, сделайте дополнение 20 пкс, возможно, но если шрифт составляет 40 пкс, сделайте дополнение 40 пкс, например.

кроме того, мы должны объяснить остающееся пространство. Если минимальная высота 200, текст является, по крайней мере, размером шрифта высоко. Это может быть больше, если существуют разрывы строки, но если размер шрифта составляет 16 пкс, по крайней мере, текст занимает 16 пкс вертикально.

Так из 200, мы имеем 200 - 16 = 184 пикселя, доступные самое большее, для деления на наш padding-top и дополнительную нижнюю часть.

необходимо удостовериться, что дополнение, по крайней мере ((минимальная ширина - размер шрифта) / 2) для составления этого сценария!

Hope это помогает!