Не получается правильно поставить обьекты HTML/CSS

Question

Подскажите пожалуйста, пытаюсь разместить обьекты так как на фото (Нижний блок) но никак не получается. Пробовал через флексбокс, а именно align-self для Site, но ничего не меняется. Пробовал через float:left к div, но в таком случае Site отображается не по центру всего блока а по центру относительно расстояния от левого края блока к краю div. Пробовал элементарный margin: 0 auto, но в таком случае div сьезжает на ряд вниз. Важно что хочу обойтись без использования absolute что бы в дальнейшем ничего не ломалось и выглядило отлично на разных экранах.... Прошу помощи..

Answer 1

просто в разметке создайте не два, а три дочерних блока

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

У вас самый левый блок будет пустым, но зачтется в разметке

Answer 2

на гридах можно сделать так:

.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>

БЛОГ НА HUSL

Не получается правильно поставить обьекты HTML/CSS

Ответы (2 шт):