HTML|CSS: почему при переносе строк не срабатывает выравнивание для последней строки?

Question

[MyQuestion]

Добрый вечер!

Наблюдаю какую-то забавную ситуацию на сайте, text-align: center; не отрабатывает для перенесённых строк. Т.е. первая строка встаёт ровненько по центру, а всё что дальше жёстко выравнивается по левому краю. Точнее только последняя строка так себя ведёт. Т.е. допустим получилось 5 строк, 4-е по центру, 5-я по левому краю. Я просто не понимаю, почему. Код скидывать нет смысла, потому что там просто тег <p></p> и text-align: center;

Кто-то с таким сталкивался? Я такое раньше нигде не замечал.

Comments

[Сергей delphinpro]

код всегда имеет смысл скидывать. особенно в песочнице и с воспроизведенной проблемой.

[Ankhena]

Код скидывать нет смысла, потому что там просто тег <p></p> и text-align: center;

Вот и сделайте песочницу codepen.io так, чтобы и мы могли увидеть проблему.

[MyQuestion]

Сергей delphinpro, Вы меня не правильно поняли. Я имею ввиду, что если я выкачу этот код в песочницу, он будет работать правильно. Я же говорю, наберите p>lorem*3 в редакторе и добавьте стиль text-align: center; и Вы получите ожидаемый результат, как собственно и я.

Вот код моих блоков:

<div class="equip-extinguisher">
      <ul class="tech_ul">
        <li><img src="/d/image.webp">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus, est enim pariatur aperiam libero blanditiis incidunt laboriosam adipisci officiis et nulla! In, natus voluptatem? Sit unde accusantium nobis ut?
            Cupiditate, consequatur veniam delectus, dolores temporibus odit repudiandae accusantium quis quas, doloribus maiores soluta quod ad iste libero quidem explicabo sapiente dignissimos. Cum cupiditate molestias quis aspernatur ab aliquid incidunt. 
          </p>
        </li>
        <li><img src="/d/image.webp"">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus, est enim pariatur aperiam libero blanditiis incidunt laboriosam adipisci officiis et nulla! In, natus voluptatem? Sit unde accusantium nobis ut?
            Cupiditate, consequatur veniam delectus, dolores temporibus odit repudiandae accusantium quis quas, doloribus maiores soluta quod ad iste libero quidem explicabo sapiente dignissimos. Cum cupiditate molestias quis aspernatur ab aliquid incidunt.
          </p>
        </li>
        <li><img src=" /d/image.webp"">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus, est enim pariatur aperiam libero blanditiis incidunt laboriosam adipisci officiis et nulla! In, natus voluptatem? Sit unde accusantium nobis ut?
            Cupiditate, consequatur veniam delectus, dolores temporibus odit repudiandae accusantium quis quas, doloribus maiores soluta quod ad iste libero quidem explicabo sapiente dignissimos. Cum cupiditate molestias quis aspernatur ab aliquid incidunt.
          </p>
        </li>
      </ul>
    </div>

.equip-extinguisher img {
    padding: 10px;
  }

  .tech_ul {
    display: flex;
    gap: 20px 10px;
    justify-content: space-between;
    width: 100%;
    text-align: center !important;
    margin: 50px 0;
  }

  .equip-extinguisher .tech_ul li {
    width: 25%;
    margin: 0px 20px;
    padding: 0;
    list-style-type: none;
  }

  .equip-extinguisher .tech_ul li img {
    width: 100%;
    padding: 0;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }

  .equip-extinguisher .tech_ul li p {
    text-align: center;
  }

  @media screen and (max-width: 760px) {
    .equip-extinguisher .tech_ul li {
      width: 40%;
    }
  }

  @media screen and (max-width: 580px) {
    .equip-extinguisher img {
      width: 100%;
    }

    .equip-extinguisher img {
      width: auto;
    }

    .equip-extinguisher .tech_ul li {
      width: 100%;
      margin: 0;
    }
    
    .tech_ul {
      flex-wrap: wrap;
    }
  }

Ничего особенного, это банальная вёрстка, грубо набросанная.
Это бессмысленно проверять, потому что оно работает вне сайта, вне общего шаблона.

[MyQuestion]

Сергей delphinpro, но спасибо за наводку! Действительно, решил проскроллить всё дерево в инспекторе и внимательней посмотреть, что там весит. И я нашёл! Есть такое свойство как text-align-last, про которое я даже не знал ) Хотя мог и догадаться, учитывая текущие тенденции. Нет я догадывался о чём-то подобном, просто я думал, что если у свойства будут модификаторы, в раскрывающем списке я их смог бы увидеть. Как у background-position например, или у list-style. А у text-align ничего такого нет, к сожалению ) В правильном направление я думал выходит, рано сдался )

Зачем там это свойство не спрашивайте - я не знаю. Пришлось работать с сайтом на мегагруп, незабываемый опыт )

[Сергей delphinpro]

MyQuestion,

Это бессмысленно проверять, потому что оно работает вне сайта, вне общего шаблона.

Об этом я и говорил. И в песочнице, и у любого, кто попробует отцентрировать параграф, всё будет нормально.
А это значит только то, что проблема у вас локальная, и нужно копаться во всех стилях сайта.

Answer 1

[MyQuestion]

Решение тут банальное оказалось. В моём случае, через цепочку селекторов CMS висело text-align-last: left;. Пришлось долго скролить прежде чем заметить.

Я тему удалять не стану, вдруг кто-то окажется в похожей ситуации.