Как настроить поля и отступы в процентах от высоты родительского контейнера?

Я ломал голову над созданием вертикального выравнивания в css, используя следующее

.base{
    background-color:green;
    width:200px;
    height:200px;
    overflow:auto;
    position:relative;
}

.vert-align{
    padding-top:50%;
    height:50%;
}

и использовал следующую структуру div.

<div class="base">
   <div class="vert-align">
       Content Here
   </div>
</div>

есть ли способ установить заполнение и / или маржу в процентах от высоты, не прибегая к использованию JavaScript?

180
css html vertical-alignment

7 ответов

у меня также была эта проблема (+1). Меня это серьезно раздражает, глупо так поступать.

исправление заключается в том, что да, вертикальный padding и margin относительно ширины, но top и bottom нет.

поэтому просто поместите div внутри другого, а во внутреннем div используйте что-то вроде top:50% (помню position вопросы, если он все еще не работает)

186

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

<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%;
}
28

ответ на немного другой вопрос: Вы можете использовать vh единицы для размещения элементов в центре просмотра:

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>
27

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

тогда на дочернем элементе '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>

есть еще одно решение с использованием flex коробка.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}
<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

вы найдете преимущества / disavantages для обоих.

5

другой способ центрировать текст одной строки:

.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;
}
3

заполнение 50% не центрирует вашего ребенка, оно поместит его ниже центра. Я думаю, что вы действительно хотите 25%. Может быть, у вас просто заканчивается пространство, поскольку ваш контент становится выше? Также вы пробовали установить верхнюю часть поля вместо верхней части?

EDIT: неважно, сайт w3schools говорит

% задает отступ в процентах от ширины содержащего элемент

Так, может быть, он всегда использует ширину? Я никогда не отмеченный.

то, что вы делаете, можно получить с помощью display:table (по крайней мере, для современных браузеров). техника объясняется здесь.

1

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

о как чтобы установить его, я бы рекомендовал ответ Камило Мартина. А как почему, Я хотел бы объяснить это немного, если вы не против.

на спецификации CSS я нашел:

'padding'
процентов: см. ширину содержания блок

... что странно, но ладно.

Итак, с родителем width: 210px и ребенка padding-top: 50%, Я получаю вычисленное / вычисленное значение padding-top: 96.5px - что не является ожидаемым 105px.

это потому, что в Windows (я не уверен в других ОС) размер общих полос прокрутки по умолчанию 17px × 100% (или 100% × 17px для горизонтальных полос). Те 17px вычитается до расчета 50%, следовательно,50% of 193px = 96.5px.

0