Вертикальное выравнивание в CSS?
-
05-07-2019 - |
Вопрос
Итак, я знаю все о проблемах с vertical-align: middle;
и о различных методах, которые люди использовали для вертикального выравнивания элементов в CSS. Но я не нашел тот, который работает для того, на что он мне нужен.
В основном на моей странице есть только один <div>
, который я хочу расположить в центре страницы, как по горизонтали, так и по вертикали. Очевидно, горизонтальная часть проста, но я зацикливаюсь на вертикальной части. Моя проблема в том, что высота <=> неизвестна; содержимое меняется, поэтому я не могу указать для него высоту.
У кого-нибудь есть советы для меня? Я готов использовать JavaScript, если это необходимо. Спасибо!
Решение
Короче говоря, вам нужно два divs для получения вертикального центрирования только для CSS.
С помощью Javascript вы можете сделать это с помощью одного div , хотя . р>
Другие советы
Как вы сказали, вы не возражаете против использования JS, вот оно ... (я обычно никогда не отступаю от решения JS, но если вы круты с ним, то и я тоже)
Если ваш CSS
#element {
position: absolute;
top: 50%;
}
Тогда ты можешь использовать моего друга jQuery
$(document).ready(function() {
var height = $('#element').height();
$('#element').css({marginTop: '-' + (height / 2) + 'px'})
{);
Обратите внимание, это не проверено, но это должно быть начало. Надеюсь, высота / 2 будет работать как положено, если нет, попробуйте использовать parseInt()
;