Подтвердить что ты не робот

Как выровнять по центру последнюю строку текста в CSS?

Как я могу централизовать текст?

В настоящее время оправдание не центрирует последнюю строку.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать свойство text-align-last

.center-justified {
    text-align: justify;
    text-align-last: center;
}

Вот таблица совместимости: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility.

Работает во всех браузерах, кроме Safari (как Mac, так и iOS), включая Internet Explorer.

Также в Internet Explorer работает только с text-align: justify (никакие другие значения text-align) и start и end не поддерживаются.

Ответ 2

Для людей, которые ищут текст, который является как центрированным, так и обоснованным, должно работать следующее:

<div class="center-justified">...lots and lots of text...</div>

Со следующим правилом CSS (при необходимости скорректируйте свойство width):

.center-justified {
  text-align: justify;
  margin: 0 auto;
  width: 30em;
}

Здесь живая демонстрация.

Что происходит?

  • text-align: justify; гарантирует, что текст заполняет всю ширину div, в которую он заключен.
  • margin: 0 auto; на самом деле является сокращением для четырех правил:
    • Первое значение используется для правил margin-top и margin-bottom. Поэтому все это означает margin-top: 0; margin-bottom: 0, то есть никаких полей выше или ниже div.
    • Второе значение используется для правил margin-left и margin-right. Таким образом, это правило приводит к margin-left: auto; margin-right: auto. Это умный бит: он сообщает браузеру, что любое свободное пространство доступно по сторонам и равномерно распределяет его по левому и правому краям. Результатом является центрированный текст.
      Однако это не сработает без
  • width: 30em;, который ограничивает ширину div. Лишь когда ширина ограничена, есть пробелы, оставшиеся для margin: auto для распространения. Без этого правила div займет все доступное горизонтальное пространство, и вы потеряете эффект центровки.

Ответ 3

работает с этим кодом

text-align: justify; text-align-last: center;

Ответ 4

Кажется, что нет способа. Вы можете подделать его, используя выравнивание, а затем обертывание последней строки текста в промежутке и установку только этого текста в центр выравнивания текста. Он работает нормально для небольших блоков текста, но не является полезным подходом к большому количеству текста или динамического текста.

Я предлагаю найти кого-то в Adobe, который участвовал в их работе W3C, и подталкивать их, чтобы привести право/право налево/центр на следующей встрече. Если кто-то сможет нажать на основные функции типографии в CSS, это будет Adobe.

Ответ 5

<div class="centered">
<p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div>

Мне удалось достичь результата, обернув содержимое тегом div и применив атрибут text-align: center. Сразу после тега div я завернул содержимое в тег абзаца и применил атрибут text-align: justify. Чтобы сделать последнюю линию центрированной, я исключил ее из тега абзаца, которая затем возвращается к атрибуту, примененному в теге div. Вам просто нужно стратегическое о том, сколько слов вы хотите на последней строке. Я включил демо из скрипки. Надеюсь это поможет.

Демо-центр Обозначает текст абзаца

Ответ 6

Ничего из этого не сработало для меня. Я просто хочу сосредоточить первые две строки в этом абзаце, но CENTER не работает, а CENTER, DIV, SPAN и т.д. Все "разрывают" абзацы (т.е. Форматирование фона идет на h ***).

<style type="text/css">
<!--
.blurow {color:blue;}
-->
</style>

<span class="blurow">
<b>Tri-League Majors Division Tournament!</b><br>
<br>

<div style="padding:0 40px 0 40px;">
<p style="font-size: 0.85em; text-align:justify; padding:20px 40px 20px 40px; background-color:#dfc;">
Phillies over the Marlins!<br>
Congratulations, Coach Princiotto, on a great season.<br>
<br>
And many thanks to Coaches Charnetski, Clark, Hill, Juan, Lewis, Lomozik, Mowchin and Princiotto for all the hard work and time you folks poured into Little League this year. The impressions you leave make a difference for a lifetime and they are appreciated more than we can say.
</p>
</div>
<br>
</span>

Основной фон начинается как светло-желтый. Тэг DIV устанавливает внешнюю границу для тега P, который поворачивает, устанавливая область разного цвета фона для абзаца; т.е. слоистый эффект.

Большая часть текста должна быть оправдана, поэтому выравнивание текста было установлено как оправдание для тега P. Но первые две строки текста должны быть сосредоточены. К сожалению, тег CENTER был завинчен и, пока он раньше работал, теперь он просто "разбивает" абзац, и весь текст текста выходит за пределы абзаца (т.е. За пределами желаемой области цвета фона). Оскорбление травмы, центрирование, действующее для этой части страницы, приводит и центрирует весь текст (как мы можем сказать, что параграф был "сломан".

Итак, я застрял без возможности сосредоточить эти две линии! У кого-нибудь есть идеи, которые не включают 200 строк изогнутого CSS-кодирования?

Ответ 7

Рассчитайте длину текстовой строки и создайте блок с одинаковым размером как строка текста. Центрируйте блок. Если у вас две строки, вам понадобятся два блока, если они имеют разную длину. Вы можете использовать тег span и тег br, если вам не нужны лишние пробелы из блоков. Вы также можете использовать предварительный тег для форматирования внутри блока.

И вы можете сделать это: "Выравнивание текста: центр;" стиль =

Для вертикали см. http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Вот лучший способ для макетов блоков и веб-страниц, перейдите сюда и изучите гибкий новый стандарт, который начался в 2009 году. http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#justify-content-property

Также w3schools имеет множество примеров гибкости.

Ответ 8

Решение (не лучшее, но все же работающее в некоторых случаях) для нединамического текста с фиксированной шириной. Используется для ситуаций, когда есть немного места для "растягивания" текста до конца предпоследняя линия. Сделайте некоторые символы в конце абзаца (экспериментируйте с их длиной) и спрячьте его; примените к абзацу абсолютное положение или просто исправьте свободное пространство с отступом/маржировкой.

Хороший способ compabitity/crossbrowser для выравнивания по центру текста.

Пример (абзац до):

.paragraph {
    width:455px;
    text-align:justify;
}

.center{
  display:block;
  text-align:center;
  margin-top:-17px;
}
<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div>

Ответ 9

Simple. Text-align: justify; (чтобы выровнять элементы) Padding-left:? Px; (чтобы центрировать элементы)

Ответ 10

В большинстве решений здесь не учитывается какой-либо отзывчивый текстовый блок.

Количество текста в последней строке абзаца определяется размером браузера зрителей, поэтому становится очень сложно.

Я думаю, что короче, если вы хотите какой-либо реакции браузера/мобильного устройства, это невозможно: (