Держите элемент всегда по центру с боковым текстом слева

Question

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

Логотип: конечно, по центру,Элемент: например, изображение, всегда по центру.Изображение может быть вертикальным или горизонтальным, но должно быть в центре.Текст: рядом с элементом / изображением.

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

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

Спасибо!

Answer 1

Горизонтальное и вертикальное центрирование легче всего решить с помощью flexbox .Просто установите следующее в вашем контейнере:

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

Обратите внимание, что вам также понадобится height!Я пошел с 100vh, чтобы занять весь видовой экран.

Чтобы централизовать ваш элемент сверху, просто дайте ему align-self: flex-start.

Отсюда просто вопрос рождения ребенка.который содержит как центральный элемент, так и смещенный элемент, оба из которых требуют position: absolute.Для элемента смещения дополнительно требуется значение margin-left, равное ширине централизованного элемента, но его следует применять только внутри медиазапроса.

Чтобы добавить элемент смещения ниже для мобильных экранов, вам понадобитсявторой медиа-запрос, который добавляет margin-top.

. Это можно увидеть в следующем (нажмите Full page после Run code snippet, чтобы увидеть представление рабочего стола).

body {
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100vh;
}

.top {
  border: 1px solid black;
  width: 50%;
  height: 10%;
  align-self: flex-start;
}

.inner-container {
  border: 1px solid black;
  width: 50%;
  height: 50%
}

.center, .off-center {
  position: absolute;
}

@media screen and (min-width: 769px) {
  .off-center {
    margin-left: 50%;
  }
}

@media screen and (max-width: 768px) {
  .off-center {
    margin-top: 50vh;
  }
}

<div class="container">
  <div class="top">Logo</div>
  <div class="inner-container">
    <div class="center">Center</div>
    <div class="off-center">Off-center</div>
  </div>
</div>