Мне нужно выровнять текст по центру, ЕСЛИ в тексте есть только ОДНА строка, а по второй линии выровнять по левому краю, если она есть.

Я посмотрел онлайн и не смог найти решение.

Вы должны установить нормальное значение для:

text-align: center

И я хочу, чтобы исходный текст был центрирован, но затем, если он переносится на 2-ю строку, я хочу, чтобы текст начинался слева, а не в центре.

Изображение конечного результата: введите описание изображения здесь

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

enter image description here

0
tvb108108 2 Май 2019 в 16:38

3 ответа

Лучший ответ

Вместо этого (или что-то подобное):

.wrapper {
  text-align: center; 
  width: 100%
}
<div class="wrapper">
  <p>Title</p>
  <div class="text">
    Example-TextExample-TextExample-TextExample-Text<br> Example-Text
  </div>
</div>

Просто оберните контейнер вокруг него и отцентрируйте его:

.wrapper {
  width: 100%; 
  text-align: center;
}

.text {
  display: flex; 
  justify-content: center; 
  text-align: left;
}
<div class="wrapper">
  <p>Title</p>
  <div class="text">
    <p>Example-TextExample-TextExample-TextExample-Text<br>Example-Text</p>
  </div>
</div>
3
Aaron3219 2 Май 2019 в 14:21

Вы можете сделать это, используя display:table

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
}

.wrapper h1 {
  text-align: center;
  margin:5px;
}

.wrapper>div {
  display: table;
  margin: auto; /* center the block of text keep the default text-align:left inside*/
}
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div>
</div>

Или inline-block

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
  text-align: center; /*center the text container*/
}

.wrapper h1 {
  margin:5px;
}

.wrapper>div {
  display: inline-block;
  text-align:left; /*keep the text left aligned inside*/
}
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div>
</div>
2
Temani Afif 2 Май 2019 в 14:00

Прежде всего, я хотел бы сказать, что это не может быть достигнуто без CSS, и вам нужно использовать стилизацию для вашего кода. Далее есть несколько способов сделать желаемый эффект. Я хотел бы объяснить каждый из них.

1. свойство text-align-last:

Цитирование непосредственно из W3Schools.

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Обратите внимание, что свойство text-align-last устанавливает выравнивание для всех последних строк в выбранном элементе. Таким образом, если у вас есть три абзаца, text-align-last будет применяться к последней строке каждого абзаца. Чтобы использовать text-align-last только для последнего абзаца в контейнере, вы можете использовать: last child.

Примечание . В Edge / Internet Explorer свойство text-align-last работает только для текста с "text-align: justify".

Поддержка браузера.

enter image description here

Фрагмент кода:

div.a {
  text-align: center;
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: left;
}
<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

2. Используя span:

По умолчанию span является встроенным элементом, но вы можете установить для него display: block и затем выровнять текст по-разному. Обратите внимание на использование !important здесь.

Фрагмент кода:

p {
  text-align: center;
}
span {
  text-align: left !important;
  display: block;
}
<p>
  This is the first line
  <span>Second Line</span>
</p>

3. Использование обёрток:

Я не хочу повторять уже предоставленные ответы. Aaron3219 уже использовал оболочки для ответа на этот вопрос. Этот ответ можно найти здесь.

0
Lucifer Conrad Reeves 2 Май 2019 в 14:40