Я ломал голову над созданием вертикального выравнивания в 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> Исправление состоит в том, что да, вертикальное заполнение и маржа относительно ширины, но top и bottom нет.
Поэтому просто поместите div внутри другого, а во внутреннем div используйте что-то вроде top:50% (помните, что position имеет значение, если она все еще не работает)
Вот два варианта эмуляции необходимого поведения. Не общее решение, но может помочь в некоторых случаях. Здесь вертикальный интервал рассчитывается исходя из размера внешнего элемента, а не его родительского элемента, но сам этот размер может быть относительно родителя, и таким образом интервал будет относительным.
<div id="outer">
<div id="inner">
content
</div>
</div>
Первый вариант: используйте псевдоэлементы, здесь вертикальное и горизонтальное расстояние относительно внешнего. Демо
#outer::before, #outer::after {
display: block;
content: "";
height: 10%;
}
#inner {
height: 80%;
margin-left: 10%;
margin-right: 10%;
}
Перемещение горизонтального интервала к внешнему элементу делает его относительно родителя внешнего. Демо
#outer {
padding-left: 10%;
padding-right: 10%;
}
Второй вариант: используйте абсолютное позиционирование. Демо
#outer {
position: relative;
}
#inner {
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
Ответ на несколько другой вопрос: вы можете использовать единицы vh для ввода элементов в центр окна просмотра:
.centerme {
margin-top: 50vh;
background: red;
}
<div class="centerme">middle</div>
Чтобы сделать дочерний элемент абсолютно неподвижным из его родительского элемента, вам нужно установить относительное положение в исходном элементе И абсолютной позиции дочернего элемента.
Затем дочерний элемент "top" относится к высоте родителя. Таким образом, вам также нужно "перевести" вверх ребенка на 50% от его собственной высоты.
.base{
background-color: green;
width: 200px;
height: 200px;
overflow: auto;
position: relative;
}
.vert-align {
position: absolute;
top: 50%;
transform: translate(0, -50%);
} <div class="base">
<div class="vert-align">
Content Here
</div>
</div>Другой способ центрирования текста одной строки:
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
line-height: 0;
}
или просто
.parent{
overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}
.child{
margin-top: 50%;
line-height: 0;
}
Это может быть достигнуто с помощью свойства writing-mode. Если вы установите writing-mode элементов в writing-mode вертикальной записи, например, vertical-lr, процентные значения его потомков для заполнения и поля в обоих измерениях становятся относительно высоты вместо ширины.
Из спецификации:
, , проценты по полям и свойства прокладки, которые всегда вычисляются относительно ширины содержащегося блока в CSS2.1, вычисляются относительно встроенного размера содержащего блока в CSS3.
Определение встроенного размера:
Измерение в линейном измерении: означает физическую ширину (горизонтальный размер) в горизонтальных режимах записи и физическую высоту (вертикальный размер) в вертикальных режимах записи.
Например, с изменяемым размером элементом, где горизонтальные поля относительно ширины и вертикальные поля относятся к высоте.
.resize {
width: 400px;
height: 200px;
resize: both;
overflow: hidden;
}
.outer {
height: 100%;
background-color: red;
}
.middle {
writing-mode: vertical-lr;
margin: 0 10%;
width: 80%;
height: 100%;
background-color: yellow;
}
.inner {
writing-mode: horizontal-tb;
margin: 10% 0;
width: 100%;
height: 80%;
background-color: blue;
}<div class="resize">
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
</div>50% отступов не будут центрировать вашего ребенка, он поместит его ниже центра. Я думаю, вы действительно хотите, чтобы набивка составляла 25%. Может быть, у вас просто не хватает места, поскольку ваш контент становится выше? Также вы пытались установить верхний край, а не padding-top?
EDIT: Nevermind, сайт w3schools говорит
% Задает заполнение в процентах от ширины содержащего элемента
Значит, он всегда использует ширину? Я никогда не замечал.
То, что вы делаете, может быть достигнуто с помощью display: table (хотя бы для современных браузеров). Этот метод объясняется здесь.
Это очень интересная ошибка. (По-моему, это все равно ошибка) Приятная находка!
Что касается того, как его установить, я бы рекомендовал ответить Камило Мартину. Но о том, почему, я хотел бы объяснить это немного, если вы, ребята, не возражаете.
В спецификациях CSS я обнаружил:
"обивка"
Проценты: см. Ширину содержащего блока
... что странно, но все в порядке.
Итак, с родительской width: 210px и дочерним padding-top: 50%, я получаю вычисленное/вычисленное значение padding-top: 96.5px - это не ожидаемый 105px.
Это связано с тем, что в Windows (я не уверен в других ОС) размер общих полос прокрутки составляет по умолчанию 17px × 100% (или 100% × 17px для горизонтальных баров). Эти 17px вычитаются до вычисления 50%, следовательно 50% of 193px = 96.5px.