Вертикальное центрирование CSS в jQuery

У меня возникают проблемы с центрированием элементов по вертикали с помощью CSS. Если кто-нибудь может подсказать, что не так в моем коде ниже, я был бы признателен.

<head>
    <style>
        #container {
            height: 500px;
            background-color: yellow;
        }
        #test {
            height: 300px;
            background-color: blue;
            vertical-align: middle;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!-- <script type="text/javascript">

        function initialize() { /*
         $("div#container").css("background-color","yellow");
         $("div#container").height("500px");

         $("div#test").css("vertical-align","middle");
         $("div#test").css("background-color","blue");
         $("div#test").height("300px");
         */
         }
   </script>
   -->
</head>

<body onload="initialize()">
    <div id="container">
        <div id="test">test</div>
    </div>
</body>


vertical-alignment html jquery css html-formatting
person Ben Pearce    schedule 13.04.2012    source источник
comment
возможный дубликат текст с выравниванием по центру по вертикали   -  person James Montagne    schedule 13.04.2012
comment
text-middle вообще существует? Я знаю про выравнивания (среди всего прочего): middle и text-top , text-bottom   -  person Roko C. Buljan    schedule 13.04.2012
comment
text-middle может не существовать. Но когда я реализую редактирование выше (средний текст заменен на средний), он все равно не работает.   -  person Ben Pearce    schedule 13.04.2012
comment
Это не дублирующий вопрос.   -  person Ben Pearce    schedule 13.04.2012
comment
+1 Тогда начните с удаления text-middle   -  person Roko C. Buljan    schedule 13.04.2012
comment
вертикальное выравнивание обычно используется для встроенных элементов.   -  person cp3    schedule 13.04.2012
comment
Вы можете попробовать сделать CSS родительского объекта DOM display: table;   -  person Chris    schedule 13.04.2012
comment
Согласен с @Criss, я предпочитаю использовать свойство display: table-cell   -  person Vitalii Petrychuk    schedule 13.04.2012
comment
@BenPearce Просто из любопытства ... ты сделал это?   -  person Roko C. Buljan    schedule 12.10.2013

Ответы (2)


arrow_upward
4
arrow_downward

демонстрация jsBin

(CSS: body{height:100%;})

Здесь, если вы хотите использовать jQuery, вам наверняка понадобится функция изменения размера окна:

function initialize() {
   var divH = $('#test').innerHeight()/2;
   var pageH = $(window).innerHeight()/2;
   $('#test').css({top: (pageH-divH)});
}

initialize();

$(window).on('resize',function(){
  initialize();
});
person Roko C. Buljan    schedule 13.04.2012
comment
так просто, так умно, GRRREAT! - person AgelessEssence; 12.10.2013

arrow_upward
0
arrow_downward

Согласно W3C, правило вертикального выравнивания может принимать следующие значения:

  • базовая линия Совместите базовую линию блока с базовой линией родительского блока. Если у блока нет базовой линии, выровняйте нижний край поля по базовой линии родителя.
  • middle Совместите вертикальную среднюю точку блока с базовой линией родительского блока плюс половина x-высоты родительского блока.
  • sub Опустите базовую линию блока до нужного положения для нижних индексов родительского блока. (Это значение не влияет на размер шрифта текста элемента.)
  • super Поднимите базовую линию блока до нужного положения для надстрочных индексов родительского блока. (Это значение не влияет на размер шрифта текста элемента.)
  • text-top Совместите верхнюю часть поля с верхней частью родительской области содержимого (см. 10.6.1).
  • text-bottom Выровняйте нижнюю часть блока по нижней части родительской области содержимого (см. 10.6.1).
  • ‹percentage Поднимите (положительное значение) или опустите (отрицательное значение) поле на это расстояние (в процентах от значения line-height). Значение «0%» означает то же, что и «базовый уровень».
  • ‹length› Поднимите (положительное значение) или опустите (отрицательное значение) коробку на это расстояние. Значение «0 см» означает то же, что и «базовый уровень».

См. http://www.w3.org/wiki/CSS/Properties/vertical-align#Values и http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Я бы также поиграл только с html и css без jQuery, пока вы не убедитесь, что ваш css работает правильно, а затем разрешите jQuery стилизовать ваш документ, как только вы убедитесь, что ваш css в порядке.

person Seth Flowers    schedule 13.04.2012
comment
Спасибо за информацию. Я попытался реализовать ваше предложение в отредактированном коде, и я все еще не вижу, чтобы свойство вертикального выравнивания как-либо влияло на укладку. Любое предложение будет оценено. - person Ben Pearce; 13.04.2012
comment
Глядя на w3c и ваш пример, я заметил, что в спецификациях говорится, что правило вертикального выравнивания применяется к элементам встроенного уровня. div — это элемент блочного уровня. Я бы даже не стал беспокоиться о вертикальном выравнивании, если вы настроены на использование div. Если вам нужно хорошее представление о том, как используется вертикальное выравнивание, с примерами, см. http://css-tricks.com/what-is-vertical-align/ - person Seth Flowers; 14.04.2012