Як я можу вирівняти текст по центру?
Наразі вирівнювання не центрує останній рядок.
Відповіді:
Ви можете скористатися 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не підтримуються.
text-align: justifyвирівнювання за лівим кінцевим рядком? Чи не тому ОП запитував, як його відцентрувати? : S
Для людей, які шукають отримання тексту, який є як по центру, так і виправданим, має працювати наступне:
<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зайняв би весь доступний горизонтальний простір, і ви втратили б ефект центрування.його робота з цим кодом
text-align: justify; text-align-last: center;
Здається, немає способу. Ви можете сфальсифікувати, використовуючи вирівнювання, а потім обернувши останній рядок тексту в проміжок і встановивши саме це для центру вирівнювання тексту. Це добре для невеликих блоків тексту, але не є корисним підходом до великої кількості тексту або динамічного тексту.
Я пропоную знайти когось в Adobe, хто бере участь у їх роботі W3C, і набридати їм, щоб на наступній зустрічі висловити обґрунтування вправо / вліво / в центрі. Якщо хтось зможе просувати основні функції типографіки в CSS, це буде Adobe.
<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. Потрібно лише визначити, скільки слів потрібно в останньому рядку. Я включив демо з скрипки. Сподіваюся, це допомагає.
Більшість рішень тут не беруть до уваги будь-який тип адаптивного текстового поля.
Обсяг тексту в останньому рядку абзацу диктується розміром браузера переглядачів, і тому це стає дуже важко.
Думаю коротше, якщо вам потрібна будь-яка реакція браузера / мобільних пристроїв, це неможливо :(
Обчисліть довжину текстового рядка та створіть блок такого ж розміру, що і рядок тексту. Відцентруйте блок. Якщо у вас є два рядки, вам знадобляться два блоки, якщо вони різної довжини. Ви можете використовувати тег span і тег br, якщо не хочете зайвих пробілів у блоках. Ви також можете використовувати попередній тег для форматування всередині блоку.
І ви можете зробити це: style = 'text-align: center;'
Для вертикальної інформації див .: 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 має безліч прикладів flex.
Рішення (не найкраще, але все ж працює в деяких випадках) для нединамічного тексту з фіксованою шириною. Корисне для ситуацій, коли є трохи місця для "розтягування" тексту до кінця передостаннього рядка. В кінці абзацу зробіть кілька символів (експериментуйте з їх довжиною) і сховайте це; застосувати до абзацу абсолютне положення або просто виправити вільний простір за допомогою заповнення / розмітки.
Хороша можливість порівняння / перехресного перегляду тексту, що вирівнює центр.
Приклад (абзац перед):
.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>І після виправлення:
.paragraph {
width:455px;
text-align:justify;
position:relative;
}
.center{
display:block;
text-align:center;
margin-top:-17px;
}
.paragraph b{
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}<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, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div>Простий. Вирівнювання тексту: вирівнювання; (для вирівнювання елементів) Заповнення ліворуч:? px; (для центрування елементів)
Ви також можете розділити елемент на два за допомогою HTML + JS.
HTML:
<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.
</div>
JS:
function justify() {
// Query for elements search
let arr = document.querySelectorAll('.justificator');
for (let current of arr) {
let oldHeight = current.offsetHeight;
// Stores cut part
let buffer = '';
if (current.innerText.lastIndexOf(' ') >= 0) {
while (current.offsetHeight == oldHeight) {
let lastIndex = current.innerText.lastIndexOf(' ');
buffer = current.innerText.substring(lastIndex) + buffer;
current.innerText = current.innerText.substring(0, lastIndex);
}
let sibling = current.cloneNode(true);
sibling.innerText = buffer;
sibling.classList.remove('justificator');
// Center
sibling.style['text-align'] = 'center';
current.style['text-align'] = 'justify';
// For devices that do support text-align-last
current.style['text-align-last'] = 'justify';
// Insert new element after current
current.parentNode.insertBefore(sibling, current.nextSibling);
}
}
}
document.addEventListener("DOMContentLoaded", justify);
Ось приклад з тегами div та p
function justify() {
// Query for elements search
let arr = document.querySelectorAll('.justificator');
for (let current of arr) {
let oldHeight = current.offsetHeight;
// Stores cut part
let buffer = '';
if (current.innerText.lastIndexOf(' ') >= 0) {
while (current.offsetHeight == oldHeight) {
let lastIndex = current.innerText.lastIndexOf(' ');
buffer = current.innerText.substring(lastIndex) + buffer;
current.innerText = current.innerText.substring(0, lastIndex);
}
let sibling = current.cloneNode(true);
sibling.innerText = buffer;
sibling.classList.remove('justificator');
// Center
sibling.style['text-align'] = 'center';
// For devices that do support text-align-last
current.style['text-align-last'] = 'justify';
current.style['text-align'] = 'justify';
// Insert new element after current
current.parentNode.insertBefore(sibling, current.nextSibling);
}
}
}
justify();p.justificator {
margin-bottom: 0px;
}
p.justificator + p {
margin-top: 0px;
}<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<p class='justificator'>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p><p>Some other text</p>