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

Question

Да, да, я знаю, что это еще один вопрос о вертикальном выравнивании с CSS, и это было сделано миллион раз раньше.Будьте уверены, что я сталкивался с этой проблемой много раз, и я уже читал о различных способах вертикального центрирования с помощью CSS.Я спрашиваю здесь, потому что ни один из этих способов не делает именно то, что я хочу сделать, и я просто хочу убедиться, что мое подозрение (что вертикальное выравнивание CSS нарушено и не будет делать то, что я хочу, чтобы оно было) определенно верно.

Прежде всего, вот мой тестовый пример: http://www.game -point.net / misc / testAlign /

Вот критерии:

• Я хочу выровнять «центрированный текст» по вертикали относительно DIV, содержащего текст «TestTestTest ...».
• Я не хочу указывать ЛЮБУЮ высоту.
• Iхочу, чтобы DIV-файлы «TestTestTest» и «Центрированный текст» динамически получали свои высоты в соответствии с объемом имеющегося текста и ограничением ширины.
• Я не хочу использовать Javascript.

Это кажется невозможным даже в CSS3, не говоря уже о CSS2.Раздражает то, что я почти на месте;position:absolute; top:-50%; DIV работает, чтобы установить верхнюю часть этого DIV наполовину ниже контейнера DIV.Проблема в том, что внутренний DIV со стилем position:relative; top:-50%; не делает ничего, чтобы переместить контент на половину его высоты, чтобы полностью центрировать его, потому что CSS говорит, что абсолютно позиционированный DIV не имеет высоты и, следовательно, top:-50% бессмысленно.Насколько я могу судить, это просто фундаментальный недостаток CSS без особой причины.Абсолютно позиционированный элемент имеет высоту, и я не знаю, почему CSS притворяется, что это не так.Я просто хотел спросить, есть ли у кого-нибудь идеи о том, как мне достичь желаемого эффекта, изображенного внизу, с учетом критериев, которые я изложил выше.По иронии судьбы IE6 / 7/8 «сломанная» модель бокса в режиме причуд дает мне именно этот эффект.Жаль, что они «исправляют» это в IE9, так что больше не будет.

Answer 1

ОК, мое подозрение действительно было верным, и это невозможно (я думаю, что это недостаток в CSS, и они должны обеспечивать средства вертикального выравнивания в DIV без указания высоты внутренних элементов).

Наименее плохое решение, которое я выбрал, заключалось в следующем: укажите высоту «среднего» DIV, то есть DIV, который отображается с помощью position:absolute и содержит реальный контент. Я добавил его на страницу теста в http://www.game -point.net / misc / testAlign / под заголовком С высотой строки: 100% и жестко заданной средней высотой DIV . Это решение означает, что вы должны знать высоту контента, который должен быть вертикально отцентрирован, что отстой, потому что браузер рассчитывает это, и вам не нужно указывать его, но это единственный способ (пока CSS не сработает). Я также использовал em s, чтобы указать высоту, чтобы увеличение или уменьшение текста не разрушало вертикальное центрирование. Оказывается, что для двух строк «Центрированного текста», которые у меня были, эта высота равна ровно 2 em с (по крайней мере, на моей машине). Если бы мне пришлось изменить высоту этого содержимого или динамически изменить его, скажем, на 3 строки или 1 строку, жестко закодированная em высота родительского div также должна была бы измениться.

Итак, вот код, с которым я наконец-то закончил, если кому-то интересно:

    <div style="border:1px solid black; padding-left:60px; width:250px; position:relative; word-wrap:break-word;">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        <!-- Unfortunately, must set this DIV's height explicitly or the contained DIV's relative positioning won't work, as this DIV is considered to have NO implicit height -->
        <div style="position:absolute; display:block; top:50%; left:0px; height:2em;">
            <div style="position:relative; top:-50%; background-color:#00aa00; line-height:100%;">
                Centred text<br/>
                Centred text
            </div>
        </div>
    </div>

Answer 2

Используйте margin-top: вместо top:, как margin-top: -25%;

Answer 3

Дело в том, что вертикальная обработка контента осуществляется по очевидным причинам, о которых, я уверен, вы уже знаете. Но вы пытаетесь решить неразрешимую проблему, это не проблема. (имеет смысл, когда знаешь, почему вещи такие, какие они есть)

Используя абсолютную позицию, вы просто выводите контент из естественного потока. Намного лучше, чтобы все было так, как должно быть, с поплавками и правильными размерами или чем-то еще, что нужно, чтобы оно хорошо ухудшалось и выглядело нормально на всех устройствах. Затем напишите две строки кода в jquery для проверки высоты и выравнивания всего (что также будет работать на «всех» устройствах). 2-3% без JS нужно будет жить со скучными сайтами.

Answer 4

Я начал получать что-то со следующим кодом ... хотя нужно работать.

На основе элементов, найденных на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Обратите внимание, ваш код работает в режиме причуд, яизменили это на HTML 5

<!DOCTYPE HTML>
<html>
<head>
    <title>Vertical align test</title>
</head>

<style type="text/css">


#outer { overflow: hidden; position: relative; border: 1px solid red; }
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {position: relative; display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%; width: 100px} /* for explorer only */
/* optional: #inner[id] {position: static;} */

</style>

<body>
<h1>New test</h1>

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text<br>
      any height<br>
      any content, for example generated from DB<br>
      everything is vertically centered
    </div>

  </div>

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>


</body>
</html>

Answer 5

.item {
    height: 40px;
    top: 50%;
    margin-top: -20px;
}

положение относительное или абсолютное;