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;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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