Я ломал голову над созданием вертикального выравнивания в CSS, используя следующее
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}
<!-- and used the following div structure. -->
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>
Хотя в этом случае это работало, я был удивлен, что, когда я увеличивал или уменьшал ширину моего базового элемента div, вертикальное выравнивание зависало. Я ожидал, что когда я установлю свойство padding-top, он будет принимать отступ в процентах от высоты родительского контейнера, который в нашем случае является базовым, но указанное выше значение в 50 процентов рассчитывается как процент от ширина. :(
Есть ли способ установить отступы и / или поля в процентах от высоты, не прибегая к использованию JavaScript?
источник
top
отлично работает для изменения размера в зависимости от высоты браузера / окна. Как насчет того, чтобы иметь div под этим div? Как вы можетеclear
2-й div быть под div, который сдвинут внизtop:50%
?top: 50%
не очень полезно, если вам нужно выровнять содержимое по своему центру.Ответ на немного другой вопрос: Вы можете использовать
vh
единицы измерения, чтобы добавить элементы в центр области просмотра :источник
vh
почти такое же, как проценты ... еще хуже в некоторых случаях. Этот ответ не имеет отношения к вопросуВот два варианта для имитации необходимого поведения. Не общее решение, но может помочь в некоторых случаях. Вертикальный интервал здесь рассчитывается на основе размера внешнего элемента, а не его родительского элемента, но сам этот размер может быть относительным по отношению к родительскому, и таким образом интервал также будет относительным.
Первый вариант: использовать псевдоэлементы, здесь вертикальный и горизонтальный интервалы относительно внешнего. демонстрация
Перемещение горизонтального промежутка к внешнему элементу делает его относительно родителя внешнего. демонстрация
Второй вариант: использовать абсолютное позиционирование. демонстрация
источник
Чтобы сделать дочерний элемент абсолютно позиционированным относительно его родительского элемента, вам нужно установить относительную позицию на родительском элементе И абсолютную позицию на дочернем элементе.
Тогда на дочернем элементе 'top' относительно высоты родительского элемента. Поэтому вам также нужно «перевести» ребенка на 50% выше его собственного роста.
Существует еще одно решение с использованием flex box.
Вы найдете преимущества / недостатки для обоих.
источник
Это может быть достигнуто с
writing-mode
собственностью. Если вы установите для элементаwriting-mode
режим вертикальной записи, напримерvertical-lr
, процентные значения его потомков для отступов и полей в обоих измерениях станут относительными к высоте, а не к ширине.Из спецификации :
Определение встроенного размера :
Например, с изменяемым размером элемента, где горизонтальные поля относятся к ширине, а вертикальные поля - к высоте.
Использование режима вертикальной записи может быть особенно полезно в тех случаях, когда вы хотите, чтобы соотношение сторон элемента оставалось постоянным, но вы хотите, чтобы его размер масштабировался в соответствии с его высотой, а не шириной.
источник
-webkit-
префикс, но, согласно caniuse, он не требует префикса с Safari 11. Пробовали ли вы его с любым браузером, в котором он не работал?Другой способ центрировать одну строку текста:
или просто
источник
50% -ая обивка не отцентрирует вашего ребенка, она поместит его ниже центра. Я думаю, что вы действительно хотите верхний слой 25%. Может быть, вам просто не хватает места, поскольку ваш контент становится выше? Также вы пытались установить поле margin вместо top?
РЕДАКТИРОВАТЬ: Nevermind, сайт w3schools говорит
Так может быть, он всегда использует ширину? Я никогда не замечал.
То, что вы делаете, может быть достигнуто с помощью display: table, хотя (по крайней мере, для современных браузеров). Техника объясняется здесь .
источник
line-height
, то есть сделать высоту строки 200 пикселей?Это очень интересная ошибка. (На мой взгляд, это все равно ошибка) Хорошая находка!
Относительно того, как установить это, я рекомендовал бы ответ Камило Мартина. Но почему , я бы хотел немного объяснить это, если вы, ребята, не против.
В спецификации CSS я нашел:
... что странно, но хорошо.
Итак, с родителем
width: 210px
и ребенкомpadding-top: 50%
я получаю вычисленное / вычисленное значениеpadding-top: 96.5px
- что не является ожидаемым105px
.Это потому, что в Windows (я не уверен насчет других ОС), размер общих полос прокрутки по умолчанию
17px × 100%
(или100% × 17px
для горизонтальных полос). Те17px
вычитаются до расчета50%
, следовательно50% of 193px = 96.5px
.источник