Как исправить проблемы CSS разметки?
Оригинал: How to fix CSS layout issues?
Изучая веб-разработку, вы будете часто бороться с CSS. В нем есть много вещей, о которых не знаешь, пока не столкнешься с ними нос к носу.
Особенно много проблем доставляет разметка макета. Например, вы пытаетесь что-то спозиционировать, но внезапно исчезают отступы, элемент уменьшается или пропадает или просто позиционируется не там, где нужно.
В интернете очень много запросов подобных следующим:
- как удалить вертикальный отступ между дивами
- как убрать горизонтальный отступ между дивами
- как исправить схлопывание маргинов css
- почему маргины внутренних элементов не работают
- почему нижний/левый/правый маргин не работает
Да, схлопывание маргинов – это довольно сложная концепция, которая не сразу поддается пониманию. Узнать об этом подробнее можно здесь.
Есть и другие популярные вопросы, которые мы разберем прямо сейчас.
text-align: center не работает
Мы постоянно используем text-align: center для центрирования текста. Но это правило также может быть использовано для выравнивания элементов внутри родительского контейнера.
У новичков это часто не получается: текст внутри блока центрируется, а сам блок – нет. Почему? Потому что элемент, который вы пытаетесь выровнять является блочным.
По умолчанию он занимает 100% ширины родителя, поэтому его невозможно выровнять по центру. Чтобы решить проблему, ему следует установить строчно-блочный тип отображения.
Рассмотрим на примере.
Есть вот такая разметка:
<div>
<div>
<h4>Some Content</h4>
</div>
</div>и вот такие стили:
body{
background: #ccc;
}
#container{
background: white;
width: 500px;
height: 500px;
text-align: center; /* отцентрируется только контент */
}
#box{
color: white;
background: #333;
width: 250px;
height: 250px;
} В браузере это выглядит следующим образом:Текст выровнялся по центру, но сам элемент – нет.
Теперь вы знаете, что это происходит из-за того, что он имеет блочный тип отображения. Чтобы сработало свойство text-align: center, он должен быть строчным или строчно-блочным.
Добавим всего одну строчку в файл стилей:
#box{
display: inline-block;
color: white;
background: #333;
width: 250px;
height: 250px;
}Теперь все правильно:
И это совсем не магия, ведь вы знаете, как все работает 😉
Расстояние между инлайн-блочными элементами
С этой проблемой сталкивался каждый CSS-новичок.
Самая раздражающая ситуация, когда у вас есть родительский контейнер и внутри него два элемента, между которыми вы хотите поровну поделить пространство.
Предполагается, что каждому нужно назначить ширину в 50%, однако это не работает. Непонятное расстояние между ними заставляет второй элемент сползать на следующую строчку, так как итоговая сумма размеров превышает 100% родителя.
В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде width: 49..
76%
Разберемся на примере: есть два элемента с одинаковой шириной и высотой, и требуется, чтобы они занимали 50/50 доступного пространства внутри своего родителя.
<div> <div></div> <div></div> </div>
Добавляем стили:
body{
background: #ccc;
}
#container{
background: white;
width: 500px;
}
#first,#second{
display: inline-block;
color: white;
background: #333;
width: 50%;
height: 250px;
}и получаем вот это:
Есть 2 распространенных способа решения этой проблемы.
- использовать комментарии;
- удалить пространство между тегами в HTML-файле.
<!-- использование комментария --> <div> <div></div><!-- --><div></div> </div> <!-- удаление промежутка между тегами --> <div> <div></div><div></div> </div>
Теперь все нормально:
Примечание переводчика:
Строчно-блочные элементы воспринимаются браузером как обычные слова в предложении, поэтому он разделяет их пробелом, ширина которого примерно равна 4px.
Оба способа позволяют убрать этот пробел на физическом уровне.
Также можно воспользоваться CSS и установить для контейнера нулевой размер шрифта. При этом пробел сохранится, но будет иметь нулевую длину. Этот способ часто используется, но подходит не для всех ситуаций.
«Съезжание» строчно-блочных элементов
Эта проблема появляется, когда у вас есть два строчно-блочных элемента и вы добавляете в один из них больше контента.
Для примера возьмем вот такую разметку:
<div> <h4>Some content</h4> </div> <div></div>
и вот такие стили:
body{
background: #ccc;
}
#first,#second{
display: inline-block;
color: white;
background: #333;
width: 250px;
height: 250px;
}Вот результат:
Макет сломался из-за того, что вершина первого элемента сползла к низу второго – это проблема выравнивания. Решить ее очень легко, есть целых два пути:
- overflow: hidden;
- vertical-align: middle (или top, или bottom, если вы понимаете, как это работает).
Это свойство можно добавить всем строчно-блочным элементам в ряду или только тому, который вызвал проблему:
body{
background: #ccc;
}
#first,#second{
display: inline-block;
color: white;
background: #333;
width: 250px;
height: 250px;
overflow: hidden;
}vertical-align: middle
В этом решении вместо overflow используется vertical-align. Тип выравнивания может быть любым: top, middle, bottom.
Если использовать top для элементов с разной высотой, то результат будет следующий:
С другими значениями, вы можете поэкспериментировать самостоятельно.
Если вы не понимаете, как работает вертикальное выравнивание, просто используйте вместо него overflow: hidden.
А мы попробуем выровнять блоки в примере:
body{
background: #ccc;
}
#first,#second{
display: inline-block;
color: white;
background: #333;
width: 250px;
height: 250px;
vertical-align: middle;
}Получилось:
Плавающие элементы не имеют высоты?
Это одна из самых раздражающих проблем CSS.
Допустим, у вас есть 2 заголовка, вы устанавливаете одному float: left, и внезапно второй прилипает к верху сайта перед ним, как будто в разметке он идет первым.
<h3>Left Text</h3> <h3>Right Text</h3>
body{
background: #ccc;
}
#left{
float: left;
}Или например, вы устанавливаете float обоим заголовкам, одному – влево, а другому &ndahs; вправо. Тогда элемент, идущий после них, поднимется вверху.
<h3>Left Text</h3> <h3>Right Text</h3> <img src="https://bit.ly/2LsgNeT">
body{
background: #ccc;
}
#left{
float: left;
}
#right{
float: right;
}
img{
width: 50%;
}Существует 3 возможных решения для этой проблемы:
overflow: hidden;display: inline-block.
Нужно обернуть плавающие элементы в родительский контейнер и уже для него установить overflow: hidden.
<div> <h3>Left Text</h3> <h3>Right Text</h3> </div>
body{
background: #ccc;
}
#wrapper{
overflow: hidden;
}
#left{
float: left;
}display: inline-block
Решение похоже на предыдущее, только вместо overflow: hidden родительскому элементу добавляется display: inline-block.
Однако это не поставит плавающий и неплавающий элементы рядом, ведь блочный элемент по-прежнему будет пытаться занять всю ширину.
Чтобы все работало, вам нужно вычислить и установить новую ширину для родителя. Это похоже на фокус: нужно найти текущую ширину родителя и прибавить к ней текущую ширину плавающего элемента. Теперь второй заголовок окажется рядом с первым.
На самом деле тут все можно объяснить. Раньше контент второго заголовка просто не мог поместиться рядом с первым, потому что инлайн-блочный родитель имел ширину, равную максимальному непереносимому контенту. Когда мы искусственно установили ему ширину, позволяющую вместить оба элемента, неплавающий блок смог растянуться на всю ширину, а его контент уместился даже сдвинувшись относительно плавающего элемента.
Сложно, непонятно и сбивает с толку? Да, есть немного. На самом деле, вам не следует использовать это решение, так как оно совершенно немасштабируемо. Если размеры блоков могут меняться (например, при увеличении шрифта), оно не подходит.
Поэтому пойдем более простым путем и сделаем второй заголовок строчно-блочным либо также плавающим.
Не забудьте использовать вертикальное выравнивание.
<div> <h3>Left Text</h3> <h3>Right Text</h3> </div> <img src="https://bit.ly/2LsgNeT">
Стили с вертикальным выравниванием:
body{
background: #ccc;
}
#wrapper{
background: white;
display: inline-block;
vertical-align: top;
}
#left{
float: left;
}
#right{
float: right;
}
img{
width: 50%;
}А этот пример без выравнивания:
Margin-top не работает?
Еще одна из самых распространенных проблем, которую часто решают с помощью паддингов, вместо того, чтобы разобраться, в чем дело.
Эта проблема известна как схлопывание полей.
Представим, что один элемент расположен внутри другого. Если назначить margin-top внутреннему блоку, то он появится у внешнего, а отступ потомка от родителя не изменится.
<div> <div></div> </div>
body{
background: #ccc;
}
#container{
background: white;
width: 500px;
height: 500px;
}
#box{
background: #333;
width: 250px;
height: 250px;
margin-top: 100px; /* добавляем margin-top */
}Есть целых 6 решений этой проблемы (но не все из них хороши).
- display: inline-block для дочернего элемента;
- display: inline-block для родительского элемента;
- overflow: hidden для родительского элемента;
- position: absolute для родительского элемента;
- установка прозрачной рамки для родителя;
- установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).
Первый и второй способ решают проблему за счет того, что один из элементов перестает быть блочным.
Проблема схлопывания актуальна только для этого типа отображения.
Пятый и шестой варианты действуют за счет оформления верхней границы родительского элемента. Если на пути маргина встает рамка или паддинг, схлопывание не происходит.
Третье и четвертое решение неочевидны и имеют свои подводные камни, поэтому по возможности лучше их не использовать. Отмена стандартного схлопывания в этих случаях является побочным эффектом.
После применения любого из этих способов результат будет такой:
Вот с такими проблемами часто сталкиваются начинающие веб-разработчики. Надеюсь, статья была полезной.
text-align-last | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Задаёт выравнивание последней строки блока текста.
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | К блочным элементам |
| Анимируется | Нет |
Синтаксис
text-align-last: auto | start | end | left | right | center | justify
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- auto
- Совпадает с выравниванием, заданным свойством text-align, за исключением значения justify. Для него выравнивание будет как start.
- start
- Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево).
- end
- Строка выравнивается по конечному краю блока, он определяется направлением текста.
- left
- Строка выравнивается по левому краю.
- right
- Строка выравнивается по правому краю.
- center
- Строка выравнивается по центру.
- justify
- Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.
Влияние разных значений на положение текста показано в табл.
1.
| Значение | Выравнивание | Вид текста |
|---|---|---|
| left | По левому краю | |
| right | По правому краю | |
| center | По центру | |
| justify | По ширине |
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
start end left center right justify
div {
text-align-last: {{ playgroundValue }};
}Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>text-align-last</title>
<style>
div {
width: 300px;
text-align: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<div>
При переходе через горы опирайся на долину;
располагайся на высотах, смотря, где солнечная сторона.
При
бое с противником, находящимся на возвышенности, не иди
прямо вверх. Таково расположение войска в горах.
</div>
</body>
</html>
Объектная модель
Объект.style.textAlignLast
Примечание
Internet Explorer и Edge работают только когда значение свойства text-align задано как justify.
Firefox до версии 49 поддерживает свойство -moz-text-align-last.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Text Module Level 3 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| left, right, center, justify, auto | 6 | 12 | 47 | 34 | 12 | 49 | |
| start, end | 79 | 47 | 34 | 12 | 49 | ||
| left, right, center, justify, auto | 80 | 68 | 46 | |
| start, end | 80 | 68 | 46 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Текст и шрифт
См. также
- text-align
Рецепты
- Как выровнять текст по ширине?
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 25.04.2020
Редакторы: Влад Мержевич
выравнивание не работает в таблице td [html, css, text-align]
Я хотел бы, чтобы текст был оправдан.
Я попытался поставить text-align: justify в td, но это не сработало. Он всегда отображается как text-align: left
HTML:
<div>
<table>
<tbody>
<tr>
<td>농 정 과</td>
<td>063-454-2830</td>
</tr>
<tr>
<td>농 촌 지 원 과</td>
<td>063-454-5225</td>
</tr>
<tr>
<td>기 술 보 급 과</td>
<td>063-454-5302</td>
</tr>
<tr>
<td>농산 물 유 통과</td>
<td>063-454-3013</td>
</tr>
<tr>
<td>농기계임대사업소</td>
<td>063-454-5248</td>
</tr>
<tr>
<td>농산 물가 공센터</td>
<td>063-454-5257</td>
</tr>
</tbody>
</table>
</div>
CSS:
.
pha-contentTAB tr td {
white-space: nowrap;
}
.pha-contentTAB tr td:nth-child(1) {
}
.pha-contentTAB{
width:100%;
}
.pha-contentTAB tr td:first-child{
width:55%;
text-align: justify;
}
.pha-contentTAB tr td:last-child{
font-weight:bold;
font-size:15px;
line-height:15px;
}
.pha-wrapperTAB{
display:inline-block;
width: 100%;
padding: 0 5px 0 5px;
}
.pha-contentTAB td{
border-bottom: 0px dotted #E4E4E4;
line-height:20px;
float:left;
width:45%;
font-size:14px;
padding:2px 0;
vertical-align: middle;
}
Я пытался добавить для него много стилей, но не все, например:
.fulljustify {
text-align:justify;
}
.fulljustify:after {
content: "";
display: inline-block;
width: 100%;
}
Я не понимаю, почему выравнивание по тексту не работает.
html css text-align
person Marry Anne
schedule 04.
07.2015
source источник
Ответы (2)
arrow_upward
0
arrow_downward
Вы должны добавить обоснование в то же место, где вы стилизуете ячейки таблицы:
.pha-contentTAB td {
text-align:justify;
}
Хотя оправдание не повлияет на однострочники. Только когда он переходит на следующую строку, он выравнивает все строки, кроме последней.
В вашем примере ваш CSS будет работать, и вам нужно только применить класс к каждой из ячеек таблицы:
<td>...</td>
person empedocle schedule 04.07.2015
arrow_upward
0
arrow_downward
Попробуйте это, если вы хотите, чтобы текст td:first-child занимал всю строку:
Также вам следует удалить white-space:nowrap, который у вас есть на ..
pha-contentTAB tr td
.pha-contentTAB tr td {
/* white-space: nowrap; */
}
.pha-contentTAB tr td:nth-child(1) {
}
.pha-contentTAB{
/* width:100%; */
}
.pha-contentTAB tr > td:first-child{
/* width:55%; */
background-color: #CC0;
text-align: justify;
}
.pha-contentTAB tr td:last-child{
font-weight:bold;
font-size:15px;
line-height:15px;
}
.pha-wrapperTAB{
display:inline-block;
/* width: 100%; */
padding: 0 5px 0 5px;
}
.pha-contentTAB td{
border-bottom: 0px dotted #E4E4E4;
line-height:20px;
/* float:left; */
/* width:45%; */
font-size:14px;
padding:2px 0;
vertical-align: middle;
}
td:first-child::after {
content: "";
display: inline-block;
width: 100%;
background-color: #CC0;
}<div>
<table>
<tbody>
<tr>
<td>농 정 과</td>
<td>063-454-2830</td>
</tr>
<tr>
<td>농 촌 지 원 과</td>
<td>063-454-5225</td>
</tr>
<tr>
<td>기 술 보 급 과</td>
<td>063-454-5302</td>
</tr>
<tr>
<td>농산 물 유 통과</td>
<td>063-454-3013</td>
</tr>
<tr>
<td>농기계임대사업소</td>
<td>063-454-5248</td>
</tr>
<tr>
<td>농산 물가 공센터</td>
<td>063-454-5257</td>
</tr>
</tbody>
</table>
</div>вы можете узнать больше об этом здесь -make-text-take-full-width-of-its-container
person Shakiba Moshiri
schedule 20.
12.2018
text-align: left не работает в содержании — решено
sleclair0 (Слеклер0)
#1
Привет,
Использование последней версии (1.9.6), запуск рецепта textcat.teach и попытка выравнивания текста: осталось содержимое карты.
Просмотрев похожие темы, я попробовал
custom_theme: {
… другие элементы
,»card_css»: {«text-align»: «left»}
}
и
«card_css»: {«textAlign»: «left»}
и в global_css
«global_css»: «.prodigy-sidebar {display: none} .prodigy-sidebar-wrapper {display: none} .prodigy-content {align-text: left}»,
Все еще центрирование текста:
image1098×109 5,79 КБ
Даже в режиме разработчика браузера я не нахожу способа заставить текст быть выровнено по левому краю.
Вероятно, я упускаю из виду что-то простое ;>)
заранее спасибо… Стив
дюйма (Инес Монтани)
#2
Привет! Настройка Имена свойств должны быть добавлены в нотации верблюжьего регистра, т. е. card_css не должна находиться внутри custom_theme , поэтому я думаю, что проблема здесь. textAlign .
Если вы хотите проверить его в инструментах разработчика вашего браузера, .prodigy-content div — это то, на что стоит обратить внимание. Он устанавливает выравнивание текста, а также является контейнером, который получает card_css . Альтернативой может быть установка "global_css": ".prodigy-content {text-align: left}" .
sleclair0 (Слеклер0)
#3
Привет @ines,
Спасибо.
FYI, когда я пытаюсь использовать «card_css»: {«textAlign»: «left»} вне пользовательской темы, я получаю сообщение об ошибке:
В prodigy.json и/или конфигурации рецепта обнаружены неверные настройки
Значение card_css -> textAlign не является допустимым dict
Значение card_css не является допустимым логическим значением
Спасибо, что заметили мою опечатку в global_css! Теперь это работает.
…Стив
инес (Инес Монтани)
#4
Ах, простите, похоже, я ошибся.
Отредактировал свой комментарий выше. И рад, что теперь это работает
пс/с (П)
#6
Привет, @ines
Если можно, снова поднимаю этот вопрос. У меня похожая проблема с sleclair0.
Я отредактировал prodigy.json следующим образом:
{
"custom_theme":{<другие настройки>, "card_css":{"textAlign":"left"}}
}
Однако я не вижу изменений в выравнивании текста при перезапуске textcat.manual. Я слежу за обновлением дела о верблюдах. Я изучил похожие проблемы в других заявках в службу поддержки — является ли настройка global_css также textAlign? Я тестировал оба безрезультатно. Любая идея, что я могу делать неправильно?
Спасибо
инес (Инес Монтани)
#7
шт.:
является ли настройка global_css также textAlign? Я тестировал оба безрезультатно. Любая идея, что я могу делать неправильно?
Хм, я не уверен, почему card_css не работает. "global_css" позволяет передать любой CSS, который применяется ко всей странице. Это дает вам больше гибкости и позволяет стилизовать все на странице, а не только карточку аннотации. (Вот очень «экстремальный» пример того, что технически возможно)
В вашем prodigy.json (или конфигурации рецепта) это должно выглядеть так:
{
"global_css": ".prodigy-content {выравнивание текста: по левому краю}"
}
шт./год (П)
#8
Привет! Я видел другой пост с настройкой global_css, поэтому я добавил его, чтобы окончательный prodigy.json выглядел так:
{
"custom_theme":{<другие настройки>, "card_css":{"textAlign":"left"}, "global_css": ".prodigy-content {textAlign: left}"}
}
Возможно ли, что порядок пользовательских настроек имеет значение? Я обновил это, а затем повторно запустил «prodigy textcat.manual etc», но текст по-прежнему отображается так (извините за ужасную цензуру :)):
image1347×258 8,98 КБ
дюйма (Инес Монтани)
#9
В "global_css" должно быть text-align , а не textAlign (потому что это просто необработанная строка CSS).
Если он по-прежнему не работает, возможно, он неправильно читает prodigy.json ? Где prodigy.json , который вы редактируете? Он должен находиться либо в вашем текущем рабочем каталоге, либо в вашем домашнем каталоге Prodigy (по умолчанию .prodigy в вашем домашнем каталоге пользователя — вы также можете запустить prodigy stats , чтобы найти точный путь).
шт. в год (П)
#10
Спасибо за совет по выравниванию текста. Обновил это.
prodigy.json находится в моей домашней папке prodigy (я думаю…). Это сбивает с толку, потому что у нас есть вундеркинд, работающий на сервере AWS. Если я перемещаю prodigy.json (или дублирую файл?) в мой текущий рабочий каталог, нужно ли мне изменить способ запуска команды prodigy textcat.? Я почти уверен, что он читается в файле json, потому что, когда я неправильно ввожу поля, запуск prodigy выдает мне ошибку (очень похожую на ту, которую пользователь выше прокомментировал при добавлении card_css в неправильное место в файл json) . 9Я только что протестировал изменение некоторых других пользовательских настроек в моем файле prodigy.json, и изменения были обнаружены при запуске textcat.manual. Вроде нормально читает файл. Теперь у меня есть только следующее в моем файле, и он все еще не может выровняться по левому краю: 
manual
{
«custom_theme»:{«card_css»:{«textAlign»:»left»}}
}
Однако, когда я есть что-то вроде этого, он работает так, как я хочу:
{
«custom_theme»: {«cardMaxWidth»: 1800}
}
psa (П)
#11
Обновление: заработало! Не уверен, почему настройка custom_theme не работает, но размещение global-css , похоже, помогло.
{
"custom_theme":{<случайные пользовательские настройки>},
"global_css": ".prodigy-content {выравнивание текста: по левому краю}"
}
Спасибо за помощь!
1 Нравится
(Николай Бьерре Педерсен)
#12
Быстрая проверка. Без использования prodigy.json не должен ли следующий пользовательский рецепт работать?
...
возвращаться {
"view_id": "классификация",
"набор данных": набор данных,
"поток": поток,
"config": {"global_css": ".prodigy-content {text-align: left}"},
}
По какой-то причине я все еще выравниваюсь по центру.
дюйма (Инес Монтани)
№13
никс411:
Быстрое продолжение. Без использования
prodigy.jsonне должен ли следующий пользовательский рецепт работать?
Это должно работать, да, если только ваш prodigy.json также не имеет настройки "global_css" , и в этом случае конфигурация рецепта будет перезаписана. (Я согласен, что это кажется немного неинтуитивным, но идея, стоящая за этим, состоит в том, чтобы рецепт определял значения по умолчанию и позволял пользователям перезаписывать их через их глобальную или локальную конфигурацию.)
1 Нравится
Выровнять текст по ширине
Word для Microsoft 365 для Mac Word 2021 для Mac Word 2019 для Mac Word 2016 для Mac Word для Mac 2011 Дополнительно…Меньше
Некоторые материалы в этом разделе могут быть неприменимы к некоторым языкам.
Выравнивание текста — это атрибут форматирования абзаца, определяющий внешний вид текста во всем абзаце. Например, в абзаце, выровненном по левому краю (наиболее распространенное выравнивание), текст выравнивается по левому полю. В выравниваемом абзаце текст выравнивается по обоим полям.
Выровнять текст по левому краю
Центральный текст
Выровнять текст по правому краю
Выравнивание текста по ширине
Распространить текст
Выровнять текст по левому краю, по центру или по правому краю
Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Дом в группе Параграф выполните одно из следующих действий:
— | Нажмите |
|---|---|
Выровнять текст по левому краю | Выровнять текст по левому краю |
Центральный текст | Текст по центру |
Выровнять текст по правому краю | Выровнять текст по правому краю |
Текст по ширине
При выравнивании текста между словами добавляется пробел, чтобы оба края каждой строки были выровнены по обоим полям.
Последняя строка абзаца выравнивается по левому краю.
Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Главная в группе Абзац нажмите Выровнять текст по ширине .
Важно: Office для Mac 2011 больше не поддерживается . Перейдите на Microsoft 365, чтобы работать где угодно с любого устройства и продолжать получать поддержку.
Обновить сейчас
Выровнять текст по левому краю, по центру или по правому краю
org/ItemList»>Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Домашний в разделе Параграф , выполните одно из следующих действий:
— | Нажмите |
|---|---|
Выровнять текст по левому краю | Выровнять текст по левому краю |
Центральный текст | Текст по центру |
Выровнять текст по правому краю | Выровнять текст по правому краю |
Текст по ширине
При выравнивании текста между словами добавляется пробел, чтобы оба края каждой строки были выровнены по обоим полям.
Последняя строка абзаца выравнивается по левому краю.
Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Главная в разделе Параграф нажмите Выровнять текст по ширине .
Распространить текст
При распределении текста между символами добавляется пробел, чтобы оба края каждой строки были выровнены с обоими полями. Последняя строка в абзаце также распределяется.
На вкладке Главная в разделе Параграф щелкните Распределенный текст .
org/ListItem»>Щелкните в любом месте абзаца, где вы хотите распределить текст.
См. также
Настройка отступов и интервалов
Выровнять объекты
Выравнивание текста или настройка полей в текстовом поле
Имеет ли значение выравнивание текста для доступности и удобства использования?
Я снова и снова вижу это в пользовательском интерфейсе и веб-дизайне — людям нравится центрировать, выравнивать и выравнивать текст по правому краю. Люди думают, что это может сделать их текст похожим на красиво или мое любимое запретное слово в веб-дизайне, чисто .
Но на самом деле это еще один пример того, как люди жертвуют пользовательским опытом (UX) ради дизайна пользовательского интерфейса (UI). Пора положить этому конец! Имеет ли значение выравнивание текста для доступности? Давайте перейдем к делу.
4 типа выравнивания
4 типа выравнивания в графическом, пользовательском интерфейсе и веб-дизайне:0270
В веб-дизайне эти типы выравнивания используются по-разному.
Выравнивание по левому краю является наиболее популярным выравниванием текста, а также выравниванием по умолчанию. Выравнивание по левому краю обычно ассоциируется с длинным текстом абзаца, что делает его максимально удобным для чтения.
Выравнивание по центру используется более экономно и для визуальной привлекательности, как в этих обычных макетах из 3 или 4 столбцов на домашних страницах.
Я также часто вижу его внизу страницы как призыв к действию, придающий менее длинному контенту лучшую симметрию.
Выравнивание по правому краю используется редко, если вообще используется. Но если он используется, то для выравнивания текста по другому элементу для большего визуального эффекта.
И, наконец, оправданное выравнивание чаще используется с минималистичным или роскошным стилем дизайна, чтобы придать ему визуальный вкус и элегантность.
Выравнивание по левому краю
По левому краю — наиболее популярное выравнивание текста по умолчанию. Это лучший вариант для удобочитаемости и взаимодействия с пользователем из-за того, как наши глаза читают.
Выравнивание по правому краю
Выравнивание по правому краю, вероятно, является наиболее редко используемым выравниванием, а когда оно используется, то обычно используется в небольших количествах.
Отличным примером эффективного использования выравнивания по правому краю является навигация по веб-сайту.
С правильным выравниванием вы можете включить кнопку CTA в правом верхнем углу, и основные ссылки будут хорошо выровнены с ней, что сделает навигацию очень удобной для сканирования.
Выравнивание по правому краю в лучшем случае следует использовать с осторожностью, так как выравнивание по правому краю плохо сказывается на удобстве работы пользователя и удобочитаемости. Есть некоторые редкие случаи, когда это действительно может иметь смысл, если использовать его редко, как в этом примере современного делового фирменного бланка.
Как правило, выравнивание по правому краю не следует использовать, если вы выравниваете текст, содержащий более 5 слов за раз. Это держит пользовательский опыт под контролем, добавляя при этом некоторое мятежное форматирование.
В примере справа выровненный по правому краю текст имеет максимум 3 слова в строке, что в худшем случае ограничивает негативное взаимодействие с пользователем незначительным, что делает его хорошим вариантом использования.
Следует отметить, что текст, выровненный по правому краю, отличается от элементов, выровненных по правому краю. Элементы, выровненные по правому краю, работают хорошо в большинстве случаев и действительно могут помочь использовать неиспользуемое пространство. На фирменном бланке нормально, что область содержимого выровнена по правому краю, это правильное выравнивание текста в той области содержимого, где лежат мои критические замечания.
Выравнивание по центру
Выравнивание по центру может хорошо выглядеть в малых дозах, но может привести к проблемам, если люди злоупотребляют им.
Проблемы с выравниванием по центру и доступностью
Причина, по которой выравнивание текста по центру ужасно неудобно для пользователя, заключается в том, что с каждой новой строкой, которую читает пользователь, наступает короткий момент, когда пользователь должен найти, где начинается следующая строка, — уменьшая скорость чтения пользователей.
Намеренно ограничиваете удобство чтения вашего пользователя? Да, черт возьми! Думаю, это то, что приходит в голову людям, когда они решают центрировать большой абзац.
Вы обнаружите, что в большинстве случаев центрированный текст ухудшает взаимодействие с пользователем. Однако существуют некоторые ограничения и исключения для выравнивания по центру.
Абзацы выравниваются по центру
Зачем, зачем мы это делаем. Ах да, потому что это красивое . Центрированный текст стал обычным явлением, особенно в дизайне веб-сайтов.
По моему мнению, центрированные абзацы допустимы только до определенной точки, а именно до 3 строк текста. Более того, становится слишком неприятно читать каждую последующую строчку.
Вот несколько примеров:
Это приемлемая длина текста в абзаце для выравнивания по центру. Не более трех строк текста.
Это гораздо более длинный абзац, который неприятно читать из-за того, что вам приходится много раз находить начало следующей строки. Текст абзаца по центру должен быть ограничен и использоваться с осторожностью, чтобы пользователь не раздражался при чтении вашего текстового контента.
Заметили, что весь контент в этом блоге выровнен по левому краю? Это называется пользовательским опытом, и не забывайте об этом!Из второго примера видно, что абзац совершенно раздражает при чтении. Это становится только хуже на мобильных устройствах. Вот почему выравнивание по левому краю следует использовать в 95% случаев.
Должны ли заголовки располагаться по центру?
Заголовки основных страниц должны располагаться по центру, поскольку в них, как правило, не так много слов и, следовательно, строк текста. Большинство заголовков страниц недостаточно длинные, чтобы выравнивание текста стало проблемой для удобства использования. Однако вторичные заголовки (h3) и все, что ниже, всегда должно быть выровнено по левому краю, чтобы соответствовать тексту абзаца.
Примером выравнивания заголовка Google является этот пост в блоге. В разделе заголовков вверху я использую выравнивание по левому краю, потому что некоторые заголовки некоторых моих статей могут быть достаточно длинными, и центрирование текста станет раздражающим для чтения, поэтому я использую выравнивание по левому краю.
Выравнивание по ширине
Что такое выравнивание по ширине и как оно работает?
Текст с выравниванием по ширине выглядит так, как если бы выравнивание по центру и выравнивание по левому краю имели дочерние элементы. Выровненный текст делает ваши абзацы похожими на блоки и имеет определенные стороны.
Он работает, изменяя интервал между каждым словом в зависимости от того, сколько слов, которые он лучше всего видит, может поместиться в одну строку. Интервал между словами одинаковый для каждой строки, но изменяется для следующей.
Различные интервалы между каждым словом из-за выравнивания текста по ширинеИдея использования выравнивания по ширине заключается в том, что он выглядит более визуально привлекательным, чем если бы использовалось выравнивание по левому краю. Отсюда его обычное использование в книгах и письменных материалах.
Проблемы с выравниванием по вертикали и почему это плохо
Что может очень легко случиться с выравниванием по ширине, так это в узких столбцах или строках с большим количеством длинных слов, между каждым словом могут быть огромные неудобные интервалы.
Иногда бывает так плохо, что слова разбиваются на слоги. Это создает плохой пользовательский опыт, затрудняя чтение текста.
Это может произойти без вашего ведома, если текст масштабируется/изменяется таким образом, что текст становится таким.
Когда в книгах или журналах используется выравнивание по ширине, есть люди, которые просматривают каждую страницу и вручную регулируют интервалы, чтобы избавиться от любого из этих неудобных интервалов, и даже добавляют дефисы, если это необходимо. Это совершенно неразумно делать на веб-сайте, слишком много разных размеров экрана, разрешений экрана и уровней масштабирования, чтобы иметь выравнивание текста на веб-сайте без неудобного выравнивания по крайней мере для кого-то.
Почему книги и журналы полностью оправданы?
Книги и журналы на сегодняшний день являются наиболее распространенным источником выровненного текста. Им нравится использовать текст с выравниванием по ширине, потому что он выглядит более визуально привлекательным и выглядит более профессионально.
Он может даже сэкономить на расходах на печать за счет экономии страниц за счет того, что каждая строка текста используется на полную ширину.
В каждой строке книги или журнала обычно достаточно слов, чтобы не возникало проблем с обоснованным выравниванием. Каждая строка текста в книге обычно имеет около 60 символов в строке, что составляет около 10 слов в строке. Это позволяет книгам иметь визуальную привлекательность текста с выравниванием по левому краю и взаимодействие с пользователем с текстом, выровненным по левому краю.
В случае, если выравнивание текста по ширине не работает, будет использоваться выравнивание по левому краю, чтобы расстояние между словами не отвлекало. Дизайнеры книг и форматировщики книг обычно выбирают, какое выравнивание лучше всего подходит для каждой книги или письменного материала.
Выровненный по ширине текст имеет свои применения. Это определенно может добавить визуальной привлекательности абзацам на странице, но если не использовать его с осторожностью, это может привести к тому, что текст будет выглядеть фрагментированным, что отвлечет внимание пользователя от положительного опыта.
Рекомендации по выравниванию текста
Используйте в основном текст, выровненный по левому краю
Текст, выровненный по левому краю, находится там, где он есть. Это знакомо, это быстро и надежно. Выравнивание текста по левому краю следует использовать в 95% случаев, чтобы помочь вашим читателям читать с оптимальной скоростью чтения.
Используйте меньше текста, но немного с выравниванием по центру, если это применимо
Вы можете использовать выравнивание по центру небольшими порциями, например, в заголовках главной страницы, не отвлекая внимание пользователя. Текст абзаца можно выровнять по центру, если он состоит из 3 или менее строк текста, следует использовать больше, чем выравнивание по левому краю, поскольку текст становится слишком раздражающим для чтения.
Используйте выравнивание по ширине только тогда, когда это имеет смысл
Используйте выравнивание по ширине только для носителей, где это обычное дело, например, для материальных книг или электронных книг.