Центрировать текст внутри колонки на мобильном телефоне

Question

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

CodePen

HTML (соответствующий раздел):

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>.....</p>
            </div>
          </div>
        </section>

CSS:

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
  width: 80%;  

}

/* Not sure why this is needed */
.about .row {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .about {
    padding: 2em;
  }

  .about p {
    font-size: 15px;
  }

  .portrait {
    height: 250px;
    margin-bottom: 1em;
  }
}

Answer 1

Существуют различные проблемы с разметкой.

• Тег первой строки не закрыт должным образом.
• Дополнительная информация о CSS ограничивает текст до 80%;

Удалите это ...

/* Not sure why this is needed */
.about .row {
  width: 100%;
}
.about p {
  text-align: left;
  width: 80%;  
}

https://www.codeply.com/go/fXFvL2644p

Если вы собираетесь использовать сетку Bootstrap, внимательно следуйте соответствующей структуре container> row> col(s).

Answer 2

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

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Удалите это, и вы должны потерять пространство.Для центрирования абзаца на мобильном, кажется, ваш p элемент уже занимает 80% своего родителя, поэтому для центрирования просто добавьте следующее:

.about p {
    margin:0 auto;
}

Визуально это выглядит как вашЭлементы p занимают гораздо меньше, чем 80% ширины своих родительских элементов после вашей точки останова 767px, и это потому, что у вас установлены отступы для элементов col, about и container-fluid.Удалите или уменьшите этот отступ в точке останова, и абзацы начнут занимать место, которое вы ищете.

Answer 3

Вот код обновления

Вы можете удалить ненужные margin или width

Answer 4

добавить это ниже CSS только в мобильном

.about .row {
    margin: 0px auto;
    display: table;
}
.about p {
    text-align: center;
    width: 100%;
}