Мне нужно выровнять текст по центру, ЕСЛИ в тексте есть только ОДНА строка, а по второй линии выровнять по левому краю, если она есть.
Я посмотрел онлайн и не смог найти решение.
Вы должны установить нормальное значение для:
text-align: center
И я хочу, чтобы исходный текст был центрирован, но затем, если он переносится на 2-ю строку, я хочу, чтобы текст начинался слева, а не в центре.
Изображение конечного результата: 
Но тогда, если это только одна строка, я хочу, чтобы она была в центре, как показано ниже
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>Вы можете сделать это, используя 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>Прежде всего, я хотел бы сказать, что это не может быть достигнуто без 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".
Поддержка браузера.
Фрагмент кода:
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 уже использовал оболочки для ответа на этот вопрос. Этот ответ можно найти здесь.
En Español