Как выровнять текст по ширине в html: Выравнивание текста | htmlbook.ru

теперь считается устаревшим.Хотя он все еще может работать, ожидается, что он будет удален в пользу использования CSS. Мы рекомендуем вам использовать метод таблицы стилей (показанный ниже) для центрирования текста в HTML.

Использование свойства таблицы стилей

Вы можете центрировать текст с помощью CSS, указав свойство text-align элемента, который нужно центрировать.

Центрирование нескольких блоков текста

Если у вас есть только один или несколько блоков текста для центрирования, добавьте атрибут стиля к открывающему тегу элемента и используйте свойство «text-align».В приведенном ниже примере мы добавили их в тег

.

 
 Центрировать этот текст! 
 

Обратите внимание, что значение свойства text-align установлено на «center», чтобы указать, что элемент должен быть центрирован.

Несколько блоков текста

Если у вас есть много блоков текста для центрирования, используйте CSS внутри тегов в разделе заголовка или во внешней таблице стилей. В приведенном ниже примере кода показано, как установить центрирование всего текста внутри тегов

.

 <стиль>
п {
 выравнивание текста: центр
}
 

Текст в каждом наборе тегов

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

 <стиль>
.center {
 выравнивание текста: центр
}
 

Если вы создаете центральный класс, как показано в приведенном выше примере, абзац можно центрировать, используя приведенный ниже код, который «вызывает» центральный класс.

 
 Центрировать этот текст! 
 

Наконечник

После создания класса его можно применить к любому тегу HTML. Например, если вы хотите, чтобы заголовок был центрирован, вы можете добавить class = «center» к тегу

или другому тегу заголовка.

Как выровнять элементы в CSS — Smashing Magazine

Об авторе

Рэйчел Эндрю — не только главный редактор Smashing Magazine, но и веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе… Больше о Рэйчел Андрей …

Есть несколько способов выровнять элементы в CSS.В этой статье Рэйчел Эндрю объясняет, что они собой представляют, и дает несколько советов, которые помогут вам запомнить, что использовать и почему.

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

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

Выравнивание текста и встроенных элементов

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

Бесплатная 30-дневная пробная версия

The Ultimate Web Designer Toolbox

Мы объединились с Envato, чтобы дать нашим читателям 30 дней бесплатного доступа к крупнейшему в отрасли подписка — Envato Elements. Подписка дает неограниченное количество загрузок более чем 50 миллионов активов, таких как Темы, плагины, фотографии и наборы пользовательского интерфейса WordPress.Без ограничений на скачивание и полный коммерческая лицензия.

Первые 30 дней — в подарок! Начать сейчас — отменить в любой момент.

Загрузить сейчас

В приведенном ниже примере у меня есть текст с большим встроенным изображением. Я использую vertical-align: middle на изображении, чтобы выровнять текст по середине изображения.

См. Пример «Вертикальное выравнивание пера» от Рэйчел Эндрю.

См. Пример «Вертикальное выравнивание пера» от Рэйчел Эндрю.

Свойство line-height и выравнивание

Помните, что свойство line-height изменит размер строки и, следовательно, может изменить ваше выравнивание.В следующем примере используется большое значение высоты строки 150 пикселей, и я выровнял изображение по верхним . Изображение выравнивается по верху строки, а не по верху текста, удалите эту высоту строки или сделайте ее меньше размера изображения, и изображение и текст будут выровнены вверху текста.

См. «Вертикальное выравнивание пера и высоту строки» Рэйчел Эндрю.

См. «Вертикальное выравнивание пера и высоту строки» Рэйчел Эндрю.

Оказывается, , высота строки и размер текста — это довольно сложно, и я не собираюсь углубляться в эту кроличью нору в этой статье. Если вы пытаетесь точно выровнять встроенные элементы и хотите действительно понять, что происходит, я рекомендую прочитать «Deep Dive CSS: Font Metrics, line-height и vertical-align ».

Когда я могу использовать свойство vertical-align ?

Свойство vertical-align полезно, если вы выравниваете любой встроенный элемент. Сюда входят элементы с дисплеем : встроенный блок . Содержимое ячеек таблицы также можно выровнять с помощью свойства vertical-align .

Свойство vertical-align не влияет на элементы гибкости или сетки, и поэтому, если оно используется как часть стратегии отката, перестает применяться, как только родительский элемент превращается в сетку или гибкий контейнер. Например, в следующем перо у меня есть набор элементов с display: inline-block , и это означает, что я получаю возможность выравнивать элементы, даже если в браузере нет Flexbox:

См. Перо inline-block и vertical-align от Рэйчел Эндрю.

См. Встроенный блок Pen и вертикальное выравнивание Рэйчел Эндрю.

В следующей статье я рассмотрел встроенный блок как запасной вариант для макета Flex. Свойства выравнивания больше не применяются, и я могу добавить align-items для выравнивания элементов в Flexbox. Вы можете сказать, что используется метод Flexbox, потому что пропал промежуток между элементами, который вы получите при использовании дисплея : встроенный блок .

См. Запасной вариант Pen inline-block flex от Рэйчел Эндрю.

См. Запасной вариант Pen inline-block flex от Рэйчел Эндрю.

Тот факт, что vertical-align работает с ячейками таблицы, является причиной того, что трюк для вертикального центрирования элемента с использованием display: table-cell работает.

Теперь, когда у нас есть лучшие способы выравнивания блоков в CSS (как мы рассмотрим в следующем разделе), нам не нужно использовать свойства vertical-align и text-align в других местах, кроме встроенные и текстовые элементы, для которых они были разработаны. Тем не менее, они по-прежнему полностью допустимы для использования в этих текстовых и встроенных форматах, и поэтому помните, что если вы пытаетесь выровнять что-то встроенное, вам нужно достичь этих свойств, а не свойств Box Alignment.

Выравнивание коробки

Спецификация выравнивания коробки касается того, как мы выравниваем все остальное. В спецификации описаны следующие свойства выравнивания:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
90 -391 элементы

Возможно, вы уже думали, что эти свойства являются частью спецификации Flexbox или, возможно, сетки.История свойств такова, что они возникли как часть Flexbox и до сих пор существуют в спецификации уровня 1; однако они были перенесены в свою собственную спецификацию, когда стало очевидно, что они более полезны. Теперь мы также используем их в макете сетки, и они указаны для других методов макета, хотя текущая поддержка браузера означает, что вы пока не сможете их использовать.

Таким образом, в следующий раз, когда кто-то в Интернете скажет вам, что вертикальное выравнивание — самая сложная часть CSS, вы можете сказать им это (что даже уместится в твите):

 .container {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}
  

В будущем мы, возможно, даже сможем отказаться от display: flex , когда свойства Box Alignment будут реализованы для Block Layout. Однако на данный момент создание родительского элемента для объекта, который вы хотите центрировать, гибкого контейнера — это способ добиться выравнивания по горизонтали и вертикали.

Два типа выравнивания

При выравнивании гибких элементов и элементов сетки у вас есть две возможности для выравнивания:

1. У вас есть свободное пространство в сетке или гибком контейнере (после того, как элементы или дорожки были размещены).
2. У вас также есть сам элемент внутри области сетки, в которую вы его поместили, или на поперечной оси внутри гибкого контейнера.

Я показал вам набор свойств выше, и свойства выравнивания можно рассматривать как две группы. Те, которые занимаются распределением свободного места, и те, которые выравнивают сам элемент.

Работа с запасным пространством: align-content И justify-content

Свойства, заканчивающиеся на -content , относятся к распределению пространства, поэтому, когда вы выбираете align-content или justify-content вы распределяете доступное пространство между дорожками сетки или гибкими элементами.Они не меняют размер элементов гибкости или сетки сами по себе; они перемещают их, потому что меняют место, где уходит свободное место.

Ниже у меня есть пример гибкости и пример сетки. Оба имеют контейнер, который больше, чем требуется для отображения гибких элементов или дорожек сетки, поэтому я могу использовать align-content и justify-content для распределения этого пространства.

См. Pen justify-content и align-content Рэйчел Эндрю.

Перемещение элементов вокруг: justify-self , align-self , justify-items и align-items

Затем у нас есть align-self и justify-self применительно к отдельным гибким или элементы сетки; вы также можете использовать align-items и justify-items в контейнере, чтобы установить все свойства сразу. Эти свойства имеют дело с фактическим элементом гибкости или сетки, то есть перемещением содержимого внутри области сетки или гибкой линии.

• Схема сетки Вы получаете оба свойства, поскольку можете перемещать элемент по оси блока и по встроенной оси, поскольку у нас есть определенная область сетки, в которой он находится.
• Flex Layout Вы можете выровнять только по поперечной оси, так как главная ось управляется только распределением пространства. Поэтому, если ваши элементы расположены в ряд, вы можете использовать align-self , чтобы сдвигать их вверх и вниз внутри гибкой линии, выравнивая их друг относительно друга.

В моем примере ниже у меня есть контейнер flex и grid, и я использую align-items и align-self во Flexbox, чтобы перемещать элементы вверх и вниз друг относительно друга по поперечной оси.Если вы используете Firefox и проверяете элемент с помощью Firefox Flexbox Inspector, вы можете увидеть размер гибкого контейнера и то, как элементы перемещаются по вертикали внутри него.

В сетке я могу использовать все четыре свойства, чтобы перемещать элементы внутри их области сетки. Еще раз, Firefox DevTools Grid Inspector будет полезен при игре с выравниванием. С наложенными линиями сетки вы можете увидеть область, внутри которой перемещается контент:

Поиграйте со значениями в демонстрации CodePen, чтобы увидеть, как вы можете перемещать контент вокруг в каждом методе макета:

См. Pen justify-self, align-self, justify-items, align-items от Рэйчел Эндрю.

Смущает выровнять И оправдать

Одна из упомянутых проблем с людьми, запоминающими свойства выравнивания в Grid и Flexbox, заключается в том, что никто не может вспомнить, выравнивать или выравнивать. Какое направление какое?

Для компоновки сетки необходимо знать, в каком направлении вы выравниваете: в блочном или в линейном. Направление блока — это блоки направления, расположенные на вашей странице (в вашем режиме письма), т. е.е. для английского — вертикально. Inline direction — это направление, в котором идут предложения (в английском языке это направление слева направо по горизонтали).

Чтобы выровнять объекты в направлении блока, вы будете использовать свойства, которые начинаются с align- . Вы используете align-content для распределения пространства между дорожками сетки, если в контейнере сетки есть свободное место, и align-items или align-self для перемещения элемента внутри области сетки, в которую он был помещен. .

В приведенном ниже примере используются два макета сетки. Один из них имеет режим письма : horizontal-tb (по умолчанию для английского языка), а другой — режим письма : vertical-rl . Это единственное различие между ними. Вы можете видеть, что свойства выравнивания, которые я применил, работают точно так же на оси блока в обоих режимах.

См. «Выравнивание оси блока сетки пера» Рэйчел Эндрю.

Чтобы выровнять объекты во внутреннем направлении, используйте свойства, которые начинаются с justify- .Используйте justify-content для распределения пространства между дорожками сетки и justify-items или justify-self для выравнивания элементов внутри их области сетки во внутреннем направлении.

Еще раз, у меня есть два примера компоновки сетки, так что вы можете видеть, что встроенный всегда является встроенным, независимо от того, какой режим записи вы используете.

См. «Внутреннее выравнивание сетки пера» Рэйчел Эндрю.

Flexbox немного сложнее из-за того, что у нас есть главная ось, которую можно изменить на строку или столбец . Итак, давайте сначала подумаем об этой главной оси. Он устанавливается с помощью свойства flex-direction . Начальное (или по умолчанию) значение этого свойства — , строка , которая будет располагать элементы гибкости в виде строки в текущем режиме записи — вот почему при работе на английском языке мы получаем элементы, расположенные горизонтально, когда мы создать гибкий контейнер. Затем вы можете изменить основную ось на flex-direction: column , и элементы будут размещены в виде столбца, что означает, что они расположены в направлении блока для этого режима записи.

Поскольку мы можем выполнять это переключение осей, наиболее важным фактором в Flexbox является вопрос: «Какая ось является моей главной осью?» Как только вы это узнаете, тогда для выравнивания (когда на вашей главной оси) вы просто используете justify-content . Не имеет значения, является ли ваша основная ось строкой или столбцом. Вы управляете пространством между гибкими элементами с помощью justify-content .

См. Перо justfy-content во Flexbox от Рэйчел Эндрю.

На поперечной оси вы можете использовать align-items , которые будут выравнивать элементы внутри гибкого контейнера или гибкой линии в многострочном гибком контейнере. Если у вас есть многострочный контейнер с flex-wrap: wrap и имеют место в этом контейнере, вы можете использовать align-content для распределения пространства по поперечной оси.

В приведенном ниже примере мы делаем и то, и другое с гибким контейнером, отображаемым в виде строки и столбца:

См. Выравнивание оси Pen Cross в Flexbox от Рэйчел Эндрю.

При justify-content или align-content Не работают

Свойства justify-content и align-content в сетке и Flexbox составляют примерно , распределяя дополнительное пространство . Итак, нужно проверить, есть ли у вас дополнительное место.

Вот пример Flex: я установил flex-direction: row и у меня есть три элемента. Они не занимают все пространство в гибком контейнере, поэтому у меня есть свободное место на главной оси, начальное значение для justify-content — flex-start , поэтому все мои элементы выстраиваются в линию в начале и дополнительное пространство в конце.Я использую Firefox Flex Inspector, чтобы выделить пространство.

Если я изменю направление гибкости на , пространство между , это дополнительное пространство теперь распределяется между элементами:

Если я теперь добавлю к своим элементам больше контента, чтобы они стали больше и больше не было дополнительного места, то justify-content ничего не сделает — просто потому, что нет места для распространения.

Мне часто задают вопрос, почему justify-content не работает, если flex-direction — это column . Обычно это происходит потому, что нет места для распространения. Если вы возьмете приведенный выше пример и сделаете его flex-direction: column , элементы будут отображаться в виде столбца, но не будет дополнительного пространства под элементами, как при использовании flex-direction: row . Это связано с тем, что когда вы создаете контейнер Flex с display: flex , у вас есть гибкий контейнер на уровне блока; это займет все возможное пространство во внутреннем направлении.В CSS элементы не растягиваются в направлении блока, поэтому лишнего места нет.

Добавьте высоту контейнера, и, если это больше, чем требуется для отображения элементов, у вас будет дополнительное пространство и, следовательно, justify-content будет работать на вашей колонке.

Почему нет justify-self во Flexbox?

Grid Layout реализует все свойства для обеих осей, потому что у нас всегда есть две оси, с которыми нужно работать в Grid Layout.Мы создаем дорожки (которые могут оставлять дополнительное пространство в контейнере сетки в любом измерении), и поэтому мы можем распределить это пространство с помощью align-content или justify-content . У нас также есть области сетки, и элемент в этой области может не занимать все пространство области, поэтому мы можем использовать align-self или justify-self для перемещения содержимого по области (или align- items , justify-items для изменения выравнивания всех элементов).

Flexbox не имеет дорожек в отличие от макета сетки.На главной оси все, с чем нам нужно поиграть, — это распределение пространства между элементами. Нет концепции дорожки, в которую помещается гибкий элемент. Таким образом, не создается области, в которой можно было бы перемещать элемент. Вот почему в Flexbox нет свойства justify-self на основных осях.

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

Автоматическое поле будет занимать все пространство в том направлении, в котором оно применяется, поэтому мы можем центрировать блок (например, макет главной страницы), используя левое и правое поле авто. С автоматическим полем с обеих сторон каждое поле пытается занять все пространство и, таким образом, выталкивает блок в середину. С нашей строкой гибких элементов мы можем добавить margin-left: auto к элементу, по которому мы хотим, чтобы произошло разделение, и пока есть доступное место в гибком контейнере, вы получите разделение. Это хорошо работает с Flexbox, потому что как только нет доступного места, элементы ведут себя как обычные элементы Flex.

См. «Выравнивание пера с автоматическими полями» Рэйчел Эндрю.

Flexbox и микрокомпоненты

Одна из вещей, которые, как мне кажется, часто упускаются из виду, — это то, насколько полезен Flexbox для выполнения крошечных заданий по разметке, когда вы можете подумать, что использование с вертикальным выравниванием — лучший способ. Я часто использую Flexbox для аккуратного совмещения небольших шаблонов; например, выравнивание значка рядом с текстом, выравнивание по базовой линии двух элементов с разными размерами шрифта или выравнивание полей и кнопок формы правильно.Если вы изо всех сил пытаетесь заставить что-то хорошо сочетаться с vertical-align , возможно, попробуйте выполнить эту работу с помощью Flexbox. Помните, что вы также можете создать встроенный гибкий контейнер, если хотите, с дисплеем : inline-flex .

См. Пример inline-flex Pen от Рэйчел Эндрю.

Нет причин не использовать Flexbox или даже Grid для крошечных макетов. Они не только для больших фрагментов макета. Попробуйте разные доступные вам вещи и посмотрите, что работает лучше всего.

Люди часто очень хотят знать, как правильно или неправильно поступать. На самом деле часто нет правильного или неправильного; Небольшая разница в вашем шаблоне может означать, что Flexbox работает лучше всего, в противном случае вы бы использовали с вертикальным выравниванием .

Заключение

В заключение, у меня есть краткое изложение основ выравнивания. Если вы помните эти несколько правил, вы сможете выровнять большинство вещей с помощью CSS:

1. Вы выравниваете текст или встроенный элемент? Если это так, вам нужно использовать text-align , vertical-align и line-height .
2. У вас есть элемент или элементы, которые вы хотите выровнять по центру страницы или контейнера? Если это так, сделайте контейнер гибким, затем установите align-items: center и justify-content: center .
3. Для макетов сетки свойства, начинающиеся с align- , работают в направлении блока; те, которые начинаются с , оправдывают - работают в прямом направлении.
4. Для макетов Flex свойства, начинающиеся с align- , работают на поперечной оси; те, которые начинаются с , оправдывают- работают на главной оси.
5. Свойства justify-content и align-content распределяют дополнительное пространство. Если у вас нет лишнего места в гибком или сеточном контейнере, они ничего не сделают.
6. Если вы считаете, что вам нужно justify-self во Flexbox, то использование автоматического поля, вероятно, даст вам шаблон, который вам нужен.
7. Вы можете использовать Grid и Flexbox вместе со свойствами выравнивания для крошечных заданий по макету, а также для основных компонентов — экспериментируйте!

Для получения дополнительной информации о выравнивании см. Следующие ресурсы:

SVG: Учебное пособие по текстовым элементам

Автор Xah Lee.Дата: 30.06.2015 . Последнее обновление: 2018-04-08 .

Эта страница представляет собой учебное пособие по текстовому элементу SVG.

Текстовый элемент

текст элемент используется для добавления текста.

Атрибуты { x , y } определяют координату для размещения текста.

: текст в SVG является графикой, как если бы шрифт был заменен на настоящие кривые.Когда вы используете преобразование, такое как масштабирование, для увеличения изображения, весь текст также будет масштабирован. [см. SVG: преобразование координат]

Текст не переносится

Текст внутри текстового элемента не переносится автоматически (без автоматического переноса строки).

В отличие от HTML, и здесь нет элемента pre.

Как добавить новую строку в текстовый элемент SVG?

Вы не можете.

Решение:

• Используйте новый элемент «текст» для новой строки текста.
• используйте «tspan» с атрибутами {x, y, dx, dy}.

Оба решения требуют, чтобы вы вручную вычислили точную высоту строки для размещения текстового элемента.

Положение привязки текстового элемента

Если у вас есть текстовый элемент

кот

Точная позиция привязки — это нижний левый угол базовой линии первого символа.

Выравнивание текста

привязка текста может использоваться для установки точки, в которой {x, y} означает в текстовом элементе.

Возможные значения:

• начало (по умолчанию)
• средний
• конец

Текст — SVG 1.1 (Второе издание) #TextAnchorProperty

Элемент «tspan»

tspan похож на элемент HTML span .

элемент tspan используется внутри элемента text .

tspan используется для установки различных стилей для слов в текстовом теге, например, полужирного текста.

tspan также полезен для размещения каждой строки в текстовом элементе.

Вы также можете использовать tspan , чтобы настроить положение слова или буквы. Используйте атрибут dy , чтобы изменить положение относительно текущего положения текстового элемента.

Наиболее полезным атрибутом для tspan является { dx , dy }. Они смещены относительно нормального положения символа.

tspan также имеют атрибуты { x , y } для абсолютного позиционирования.

Текст — SVG 1.1 (второе издание) #TSpanElement

Несколько значений атрибута X и Y

Каждый из атрибутов «x» и «y» может быть последовательностью чисел. Второе число — это положение второго символа, третье число — это положение третьего символа и т. Д.

Верхний индекс, нижний индекс со сдвигом базовой линии

baseline-shift Свойство можно использовать с текстовым элементом или tspan для перемещения символов вверх или вниз.

возможных значений:

• исходный
• переходник
• супер
• процентов
• длина
• наследовать

Текст — SVG 1.1 (второе издание) #BaselineShiftProperty

Вертикальный текст

Вертикальный текст можно разместить по:

Возможные значения для режима записи :

• lr-tb (слева направо, сверху вниз)
• рл-тб
• тб-рл
• лр
• rl
• тб
• наследовать

Текст — SVG 1. 1 (второе издание) #WritingModeProperty

глиф-ориентация-вертикаль

глиф-ориентация-вертикаль может использоваться для ориентации букв вбок.

Допустимые значения:

• авто
• угол . Должен быть одним из { 0 , 90 , 180 , 270 }
• наследовать

 <рисунок>
 

Текст — SVG 1.1 (второе издание) #GlyphOrientationVerticalProperty

Текст по контуру

Чтобы текст отображался на кривой, используйте элемент textPath с атрибутом xlink: href , который ссылается на ранее определенный элемент path .

textPath должен иметь атрибут xlink: href со значением идентификатора элемента path .

Текст — SVG 1.1 (второе издание) #TextOnAPath

[см. Учебное пособие по SVG Path]

[см. SVG: Элементы структуры]

Укажите длину текста

textLength = " длина "

Текст — SVG 1.1 (второе издание) #TextElementTextLengthAttribute

• lengthAdjust = "интервал"
• lengthAdjust = "spacingspacingAndGlyphs"

Атрибуты текстового элемента

Текст — SVG 1.1 (второе издание) #TextElement

Стили текста

Размер шрифта см.

SVG: размер шрифта

Свойства шрифта

Следующие элементы такие же, как CSS.

Свойства текста

Следующее аналогично CSS.

Стиль — SVG 1.1 (второе издание) #SVGStylingProperties

Свойства текстового элемента

Другие свойства для Visual Media

• clip , применимо только к самому внешнему элементу svg.
• color , используется для предоставления потенциального косвенного значения (currentColor) для свойств fill , stroke , stop-color , flood-color и lighting-color . (Свойства SVG, поддерживающие цвет, позволяют использовать цветовую спецификацию, расширенную из CSS2, для соответствия определениям цвета в произвольных цветовых пространствах.См. Описание цветового профиля.)
• курсор
• дисплей
• переполнение , применимо только к элементам, которые устанавливают новое окно просмотра.
• видимость

Номер ссылки

Текст — SVG 1.1 (второе издание)