HTML-абзац, как выровнять текст в центре и начать все текстовые строки в том же месте или позиции? - PullRequest
Новая
       0

HTML-абзац, как выровнять текст в центре и начать все текстовые строки в том же месте или позиции?

0 голосов
/ 27 ноября 2018 

 <p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>

Я пытался написать абзац в HTML, мне нужно выровнять текст по центру, текст выровнен, но проблема в том, что текст не начинается с того же местаили положение.Пожалуйста, проверьте изображение, чтобы понять меня ясно, спасибо.

мой HTML

проверьте это изображение The image

Ответы [ 5 ]

0 голосов
/ 27 ноября 2018 

p {
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%,0);
    transform: translate(-50%, 0);
}
<p>
        Lorem Ipsum is simply dummy text<br>
        Lorem Ipsum has been the industry's <br>
        when an unknown printer took a galley <br>
        It has survived not only five centuries,<br>
        remaining essentially unchanged. It was<br>
        of Letraset sheets containing Lorem Ipsum<br>
        publishing software like Aldus PageMaker.
    </p>
0 голосов
/ 27 ноября 2018

Если вы поместите абзац внутри div (с фиксированной шириной) и центрируете div на странице, то вы можете использовать выравнивание текста для стилизации самого абзаца (внутри div).Я думаю, что вы хотите text-align: left; для самого текста абзаца.Вот CSS для оболочки div.

CSS 

.text-wrapper{
width: 300px;
margin: 0px auto;
}

HTML 

   <body>
      <div class="text-wrapper">
        <p style="text-align: left;">
        Lorem Ipsum is simply dummy text<br>
        Lorem Ipsum has been the industry's <br> 
        when an unknown printer took a galley <br>
        It has survived not only five centuries,<br>
        remaining essentially unchanged. It was<br>
        of Letraset sheets containing Lorem Ipsum<br>
        publishing software like Aldus PageMaker.</p>
      </div>
    </body>
0 голосов
/ 27 ноября 2018

Если вы можете только стилизовать элемент <p>, выполните следующие действия:

Добавьте display: flex, чтобы преобразовать p в гибкий контейнер, и text-align: left, чтобы сохранить текстВыровнено по левому краю.

Установите направление контейнера на column, чтобы оно сохраняло разрывы, и тогда align-items: center.

align-items будет выравнивать элементы напоперечная ось, которая в данном случае является горизонтальной осью. 

 <p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
0 голосов
/ 27 ноября 2018

Вы можете сделать что-то вроде этого: 

 <div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br> 
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>

text-align: center-right не является допустимым атрибутом.Однако мы можем обернуть элемент div вокруг вашего абзаца и переместить его в центр страницы с полем: 0 auto.Мы также должны дать этому div фиксированную ширину.

0 голосов
/ 27 ноября 2018

Это самый короткий и простой способ.Вы устанавливаете фиксированную ширину и задаете для нее автоматическое поле, чтобы оно было отцентрировано. 

.container {
  width: 300px;
  margin: 0 auto;
}
<div class="container">
  <p>
    Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br>    publishing software like Aldus PageMaker.</p>
</div>

Если ваш макет более сложный, вы можете использовать flex.Например: 

.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content{
  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
}
<div class="container">
  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br>    publishing software like Aldus PageMaker.</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...