Как сделать так, чтобы блок ul li всегда выравнивался посередине при изменении размера родительского блока?

dlevykin

Привет, ребята, Пожалуйста, взгляните на изображение и помогите мне. У меня есть зеленый родительский блок div, высота которого будет увеличиваться и уменьшаться относительно содержимого серого дочернего блока.

Этот добрый серый ребенок будет носить с собой текст, изображения, видео и так далее. Еще у меня есть непослушный приемный розовый ребенок, с которым мне хотелось бы разобраться.

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

Как мне добиться того, чего я хочу.

я пробовал это http://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul

и это https://www.w3.org/wiki/CSS/Properties/vertical-align

и они мне не подошли.

Вот попытка на данный момент:

 
.this_f_box {

float: right;

text-align: right;

display: table;

height: 100%;
}
.this_f_box ul {

display: table-cell;

vertical-align: middle;
}
.this_f_box ul li {

font-size: 1.4em;
}

Код (разметка): И CSS:

  <div class=bigbox> <div class=box1> <p> Context goes here </p> </div> <div class=this_f_box> <ul> <li><img id="plus" src="images/plus.svg" /></li> <li><img id="minus" src="images/minus.svg" /></li> <li> | </li> <li><img id="more" src="images/more.svg" /></li> </ul> </div> </div> <!-- bigbox -->

Код (разметка):

systemintegra.

Привет, ketting00,

Вы можете выровнять ul li посередине, когда размер родительского блока изменяется без абсолютного позиционирования.

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

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

Макет будет работать только с псевдоэлементом :after.

Это необходимо из-за спецификации выравнивания: последняя строка в абзацах не выравнивается.

В вашем случае последняя строка будет строкой с дочерними элементами.

Поэтому вам нужно создать фальшивую последнюю строку с псевдоэлементом :after, чтобы предыдущая (с дочерними элементами) была оправдана. Вот CSS:

 .bigbox {

text-align: justify;
}

.bigbox:after {

display: inline-block;

width: 100%;

content: '';
}

.box1,
.this_f_box {

display: inline-block;

vertical-align: middle;
}

.this_f_box {

text-align: right;
}

Код (CSS):

qwerffffx

Как насчет:

 .big_box{

position: relative;
}
.this_f_box{

position: absolute;

right: 0;

top: 50%;

margin-top: -3em; /* arbitrary; this is half of .this_f_box height */
}

Код (CSS): .box1 может отличаться, но не .this_f_box. Правильный? Итак, я думаю, вы можете переместить .this_f_box в середину (с помощью top), а затем поднять его на половину его высоты (с помощью поля-top).

Похожие темы	Дата
ВИзитки для Юридической компании	19.10.2024, 18:10
Как сделать руку и царапины на майку?	19.10.2024, 18:10
Как создать таблицу в базе данных	19.10.2024, 18:10
Как сделать таблицу с горизонтальной прокруткой с помощью Tailwindcss 2.1?	19.10.2024, 18:10
Я убил свой игровой блог?	19.10.2024, 18:10
Поиск и удаление ссылки, указывающей на 404	19.10.2024, 18:10
Нужна помощь с веб-дизайном?	19.10.2024, 18:10
SVG-карты с подсказками	19.10.2024, 18:10
Неправильная ширина индикатора выполнения	19.10.2024, 18:10
Почему мой сценарий 15-летней давности перестал работать?	19.10.2024, 18:10

Как сделать так, чтобы блок ul li всегда выравнивался посередине при изменении размера родительского блока?

dlevykin

systemintegra.

qwerffffx

I AM

Интересно