0

Нужно, чтобы текст либо заголовок всегда был по центру блока, и вместе с ним уменьшался, либо прижимался к левой стороне при сжатии

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

вот код:

.mini-news__item h3 {
  position: absolute;
  top: 60px;
  left: 55px;
  color: #fff;
  text-shadow: 1px 1px #000;
  font-size: 30px;
}
<li class="mini-news__item">
  <a href="#" class="mini-news__link">
    <article class="mini-news__post">
      <div class="mini-news__img">
        <img src="img.jpg" alt="">
      </div>
      <h3>Lorem ipsum</h3>
    </article>
  </a>
</li>

2 ответа 2

0

Предлагаю использовать медиа-запросы.

  // Ландшафтный экран телефоны
  @media (max-width: 480px) { ... }

  // От ландшафтного экрана телефона до потретного планшета
  @media (max-width: 767px) { ... }

  // От портретного планшета до ландшафтного экрана и настольных дисплеев
  @media (min-width: 768px) and (max-width: 979px) { ... }

  // Большой дисплей
  @media (min-width: 1200px) { ... }

Рекомендую изучить следующую статью.

.mini-news__item h3 {
  position: absolute;
  top: 60px;
  left: 55px;
  color: #fff;
  text-shadow: 1px 1px #000;
  font-size: 30px;
}

@media (max-width: 480px) {
  .mini-news__item h3 {
    text-align: left;
    position: absolute;
    top: 60px;
    left: 55px;
    color: #fff;
    text-shadow: 1px 1px #000;
    font-size: 30px;
  }
}
<li class="mini-news__item">
  <a href="#" class="mini-news__link">
    <article class="mini-news__post">
      <div class="mini-news__img">
        <img src="img.jpg" alt="">
      </div>
      <h3>Lorem ipsum</h3>
    </article>
  </a>
</li>

1
  • Если надо, могу подробнее описать как с ними работать. 29 авг 2018 в 9:55
0

Не вижу как оно должно смотреться с изображением, но можно попробовать решить задачу флексами. Убрать абсолютное позиционирование h3 и задать article:

display: flex;
flex-direction: column;
align-items: center;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.