Подскажите пожалуйста, пытаюсь разместить обьекты так как на фото (Нижний блок) но никак не получается. Пробовал через флексбокс, а именно align-self для Site, но ничего не меняется. Пробовал через float:left к div, но в таком случае Site отображается не по центру всего блока а по центру относительно расстояния от левого края блока к краю div. Пробовал элементарный margin: 0 auto, но в таком случае div сьезжает на ряд вниз. Важно что хочу обойтись без использования absolute что бы в дальнейшем ничего не ломалось и выглядило отлично на разных экранах.... Прошу помощи..
-
Вашу разметку и стили добавьте в вопрос– Danila16 авг 2022 в 15:53
Добавить комментарий
|
2 ответа
просто в разметке создайте не два, а три дочерних блока
<div class="parent">
<div class="child"></div>
<div class="child">Site</div>
<div class="child">O</div>
</div>
а в css сделайте так:
.parent {
display: flex;
justify-content: space-between;
}
.parent .child {
min-width: 1px;
}
У вас самый левый блок будет пустым, но зачтется в разметке
на гридах можно сделать так:
.container {
display: grid;
grid-template-columns: repeat(3, calc(100% / 3));
grid-template-areas: ". center end";
width: 500px;
height: 100px;
background: gray;
}
.text {
grid-area: center;
justify-self: center;
}
.block {
grid-area: end;
justify-self: end;
width: 100px;
height: 60px;
background: green;
}
<div class="container">
<p class="text">надпись</p>
<div class="block"></div>
</div>