Думаю, довольно распространенный вопрос, но я не мог найти никакого решения, чтобы его исправить.
Код:
<div class = "container">
<div class = "first-item">A</div>
<div class = "second-item">B</div>
</div>
Должно получиться так:
first-item
будет посередине, а second-item
- наконец.
Что я пробовал:
.container {
display: flex;
justify-content: center;
}
.container .second-item {
align-self: flex-end;
}
Как я могу добиться этого, используя flex
или любой другой способ css
?
Вы можете попробовать это,
.container {
display: flex;
justify-content: center;
}
.container .second-item {
right: 0;
position: absolute;
}
<div class = "container">
<div class = "first-item">A</div>
<div class = "second-item">B</div>
</div>
Почти: вам просто нужно добавить маржу auto
к первому элементу
.container {
display: flex;
justify-content: center;
}
.first-item {
margin: auto;
}
.second-item {
align-self: flex-end;
}
A центрируется относительно доступного пространства. Если второй элемент больше, это пространство уменьшается. И, согласно изображению OP, X центрируется по доступному пространству (а не по всей ширине). Решение с абсолютной позицией подойдет, если вы знаете, что делаете, потому что это может вызвать более легкое перекрытие элементов (B удаляется из потока)
Я сомневаюсь, что это требование OP. Но если это так, я уверен, что OP примет ваше решение, потому что оно самое чистое.
В вашем Codepen замените «B» на «Lorem Ipsum», и вы увидите, что «A» не в центре.