Центрирование текста в адаптивном изображении - PullRequest
Новая
       11

Центрирование текста в адаптивном изображении

0 голосов
/ 27 июня 2018

Я пытаюсь создать раздел для витрины для веб-страницы. Он состоит из div с (отзывчивым) фоновым изображением и заголовком, который будет центрирован по горизонтали и вертикали над этим изображением. Мне удалось получить изображение и сделать его отзывчивым, и я отцентрировал заголовок, но моя проблема возникает, когда размер окна становится меньше.

Я использую position: absolute, свойство top и transform для его центрирования, но свойство top работает, только если высота указана в родительском контейнере. Однако, когда окно сжимается до точки, в которой изображение начинает уменьшаться до уровня ниже его первоначальной высоты, текст не остается вертикально центрированным, а только горизонтально (поскольку я отклоняюсь от первоначальной высоты для верхней части (800 пикселей)).

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

Вот соответствующие разделы моего кода:

HTML: 

<section class="showcase">
  <div class="showcase-container">
    <h1 class="centered"><span class="highlight">BR</span> Architects</h1>
  </div>
</section>

CSS: 

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  height: auto;
}

.showcase-container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  height: 800px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

См. Документацию MDN <figcaption>. 

<figure>
    <img src="/media/examples/hamster.jpg" alt="a cute hamster" />
    <figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>
0 голосов
/ 27 июня 2018

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

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

.showcase-container {
  /* your styles here */
  background-image: url('yourimage.jpg');
  background-size: cover;
  height: 100vh;
  max-height: 800px;
}

ИЛИ, если вам нужно, чтобы он был центрирован вертикально в окне независимо от контейнера, вы всегда можете изменить top: 50%; на top: 50vh; и положение относительно тела.

0 голосов
/ 27 июня 2018

Я мог бы просто догадаться, потому что я не знаю, как это на самом деле выглядит, но я предположил несколько вещей, и в результате вместо фонового изображения я просто использовал бы нормальное изображение, делал его блочным и отображал поверх него div, вы будете сохранить высоту в любом размере, посмотрите: 

.showcase-container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.showcase-container img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 1200px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 5px;
  padding: 10px 20px;
}
<section class="showcase">
  <div class="showcase-container">
    <img src="https://source.unsplash.com/random/1200x700" alt="">
    <h1 class="centered"><span class="highlight">BR</span> Architects</h1>
  </div>
</section>
...