Как выровнять текст или блок по вертикали в css?

Выравнивание блока по центру в CSS

Так же, используя это свойство можно сделать в CSS выравнивание блока по центру. При этом данное свойство указываем для родительского блока, а для блока, который нужно выровнять задаем display:inline-block.

XHTML

<div class=»center-block»>
<div class=»centered»>
Выравнивание блока по центру в CSS
</div>
</div>

1 2 3 4 5

<div class=»center-block»> <div class=»centered»> Выравнивание блока по центру в CSS </div> </div>

CSS

.center-block{
height:200px;
background:#E8E8FF;
border:1px solid #F0F0F0;
text-align:center;
}
.centered{
display:inline-block;
width:150px;
height:50px;
background:#8CC684;
border:1px solid #ccc;
margin-top:75px;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.center-block{ height200px; background#E8E8FF; border1pxsolid#F0F0F0; text-aligncenter; }   .centered{ displayinline-block; width150px; height50px; background#8CC684; border1pxsolid#ccc; margin-top75px; }

В результате получаем вот такое выравнивание:

Выравнивание блока по центру в CSS

Такого же результата для выравнивания по ширине мы могли бы добиться, используя тоже свойство margin со значение auto для блока, который нужно выровнять. В этом случае код css выглядел бы следующим образом:

PHP

.centered{
width:150px;
height:50px;
background:#8CC684;
border:1px solid #c1c1c1;
margin:auto;
}

1 2 3 4 5 6 7

.centered{ width150px; height50px; background#8CC684; border1pxsolid#c1c1c1; marginauto; }

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

Для того чтобы задать, к примеру, отступ сверху и снизу по 50px можно написать так:

margin: 50px auto;

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

margin: 50px auto 20px auto;

В этом случае отступ сверху будет 50px, снизу – 20px, а по горизонтали блок будет выравниваться по центру.

Результат получается почти такой же:

Выравнивание блока по центру в CSS

Выровнять блок по центру получилось, но есть одно отличие. Как видите, тест в блоке теперь не выравнивается. Теперь, при необходимости сделать выравнивание текста по центру css, нужно для класса centered задать text-align:center.

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

А на сегодня у меня все. Желаю вам успешной работы над вашими проектами! До встречи в следующих статьях!

С уважением Юлия Гусарь

Fully justified text

In LaTeX text is fully-justified by default and if a switch command such as or is used the text alignment can not be switched back. For this case scenario you can use the package ragged2e. Import it adding to the preamble, then use the command as shown in the example below.

\centering
Hello, here is some text without a meaning.  This text should show what 
a printed text will look like at this place.  If you read this text, 
you will get no information.  Really?  Is there no information?  Is there 
a difference between this text and some nonsense like not at all!  A 
blind text like this gives you information about the selected font, how 
the letters are written and an impression of the look.  This text should
contain all letters of the alphabet and it should be written in of the
original language.There is no need for special content, but the length of
words should match the language.

\justify
This  is  the  second  paragraph. Hello, here is some text without 
a meaning.  This text should show what 
a printed text will look like at this place.  If you read this text, 
you will get no information.  Really?  Is there no information?  Is there 
a difference between this text and some nonsense like not at all!  A 
blind text like this gives you information about the selected font, how 
the letters are written and an impression of the look.  This text should
contain all letters of the alphabet and it should be written in of the
original language.There is no need for special content, but the length of
words should match the language.

The first paragraph in the previous example is centred by and then the alignment is switched back to fully-justified text with .

ragged2e also provides the environment to fully-justify small blocks of text in a document that is entirely left or right aligned.

Отступ первой строки

Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.

Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em).

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

Давайте рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-indent</title>
<style> 
.test {
text-indent : 0px; /* задаём отступ для первой строки текстового блока 0px (это значение по умолчанию) */
}
.test2 {
text-indent : 40px; /* задаём отступ для первой строки текстового блока 40px */
}
.test3 {
text-indent : -20px; /* задаём отрицательный отступ для первой строки текстового блока */
}
.test4 {
text-indent : 50%; /* задаём отступ для первой строки текстового блока 50% */
}
</style>
</head>
<body>
	<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test4">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</body>
</html>

В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.

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

Результат нашего примера:

Рис. 61 Пример использование свойства text-indent (красная строка).

Использование flexbox для горизонтального и вертикального центрирования элементов

Способ 1. Сочетание свойств и

Свойства Flexbox-модели позволяют выровнять элемент не только по горизонтали, но и по вертикали. Для этого нужно использовать всего 3 свойства для родительского элемента: , и . Для того чтобы было видно, как сработало последнее свойство, необходимо также добавить высоту родительскоиу элементу (в примере — ). Если у вас внутрь flex-контейнера вложен не один, а несколько элементов, то для того, чтобы они расположились друг под другом, нужно еще добавить свойство .

Использование свойств Flexbox-модели для горизонтального и вертикального центрирования элемента

<style>
.test-flex{
height: 320px;
display: flex;
justify-content: center;
align-items: center
}
figure {border: 2px dotted #a9a9a9;}
figcaption {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
</style>
<div class=»test-flex»>
<figure>
<img src=»images/cube.jpg» alt=»Центрирование flex» width=»300″ height=»200″ style=»margin: 0″ />
<figcaption>3D Cube</figcaption>
</figure>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<style> .test-flex{ height320px; displayflex; justify-contentcenter; align-itemscenter } figure {border2pxdotted#a9a9a9;} figcaption { text-aligncenter; font-weightbold; margin-bottom10px; } </style> <div class=»test-flex»> <figure> <img src=»images/cube.jpg»alt=»Центрирование flex»width=»300″height=»200″style=»margin: 0″> <figcaption>3DCube<figcaption> <figure> <div>

Пример вживую:

3D Cube

Способ 1а: display: inline-flex для небольших элементов

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

See the Pen inline-flex centering by Elen (@ambassador) on CodePen.dark

Способ 2: используем display: flex для родителя и margin: auto для дочернего элемента

Очень простой способ, который предполагает наличие одного дочернего элемента внутри flex-контейнера. CSS-стили лаконичны:

Один дочерний flex-элемент с margin: auto внутри flex-контейнера

CSS

.parent {
height: 400px;
display: flex;
}
.child{
margin: auto;
}

1 2 3 4 5 6 7

.parent { height400px; displayflex; } .child{ marginauto; }

В примере ниже такой вариант применен для размещения текста по центру header-a для html-страницы.

See the Pen WNGKWNQ by Elen (@ambassador) on CodePen.dark

HTML Text Align Justify | Look Good

If a text justified both on the left and on the right side then it is called Justify Text. Use “text-align: justify;” attribute to Justify. It will Stretch the sentence so that each line has an equal width (like in newspapers and books).

<p style=»text-align:justify;»>Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live»</p>

1	<pstyle=»text-align:justify;»>Always code asifthe guy who ends up maintaining your code will beaviolent psychopath who knows where you live»<p>

Question: How to Align Text side by side in HTML?

Answer: Use foot for it, first float leg and another to Right, see below example code.

<html>
<style>
.alignleft {
float: left;
}
.alignright {
float: right;
}
</style>
<body>
<h2>Tutorial</h2>

<div id=»textbox»>
<p class=»alignleft»>Text on the left.</p>
<p class=»alignright»>Text on the right.</p>
</div>
</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<html> <style> .alignleft { floatleft; } .alignright { floatright; } </style> <body> <h2>Tutorial<h2> <div id=»textbox»> <pclass=»alignleft»>Text on the left.<p> <pclass=»alignright»>Text on the right.<p> <div> <body> <html>

Question: How to align text left center right same line HTML?

Answer: Use float the same as the above example, try by yourself. And do comment on the answer we will pick up the best one and update here.

HTML div Align | Center , Left, Right, Justify

You can use Internal or external CSS with class or id to align div elements. See the below codes.

div.p1 {
text-align: center;
}

div.2 {
text-align: left;
}

div.p3 {
text-align: right;
}

div.p4 {
text-align: justify;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div.p1{ text-aligncenter; }   div.2{ text-alignleft; }   div.p3{ text-alignright; }   div.p4{ text-alignjustify; }

Do comment if you have any doubts and suggestions with examples.

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

CSS

.text-vertical-al{
display:table;
}
.text-vertical-al p{
display:table-cell!important;
vertical-align:middle;
}

1 2 3 4 5 6 7 8

.text-vertical-al{ displaytable; }   .text-vertical-al p{ displaytable-cell!important; vertical-alignmiddle; }

В результате у нас все заработало:

Выравнивание текста по вертикали CSS

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

Допустим вам нужно выровнять текст по вертикали для всей таблицы. В этом случае в файле CSS для класса table нужно написать следующее:

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

1 2 3 4 5 6

table.table-va td{ border1pxsolid#1e1e1e; background-colorrgba(0,146,243,0.13); height40px; vertical-alignmiddle;/* выравнивание текста по вертикали css*/ }

В этом случае во всех ячейках текст будет выровнен по вертикали по центру:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

1 2 3 4 5 6 7 8 9 10

<table class=»table-va»> <caption>CSS выравнивание по вертикали в таблице</caption> <tbody> <tr> <td style=»vertical-align:top;»>По верху</td> <td style=»vertical-align:middle;»>По центу</td> <td style=»vertical-align:bottom;»>По низу</td> </tr> </tbody> </table>

Вот что получится:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Применение CSS — выравнивание по центру HTML

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

CSS можно использовать, чтобы:

• Центрировать текст;
• Центрировать блочный элемент (например, div);
• Центрировать изображение;
• Вертикально центрировать блок или изображение.

Много лет назад веб-дизайнеры могли использовать <center> для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding».

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{
background: #535E73;
width: 200px;
height: 200px;
padding: 20px 50px;
}

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute», тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top»,»right»,»bottom»,»left») внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{
position: relative;
height: 250px;
background: url(space.jpg);
}

.cat-king{
width: 200px;
height: 200px;    
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
margin: auto;
background: url(king.png);
}

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Выравнивание по горизонтали

Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:

• left — выравнивание по левому краю.
• right — по правому краю.
• center — по центру.
• justify — по ширине.

Вот код HTML-страницы, текст которой выровнен по правому краю:

<!DOCTYPE html>
<html>
<head>
    <title>Выравнивание по правому краю</title>
    <style type="text/css">
    p { text-align: right; }
    </style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>

Выглядеть страница будет так:

Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index

Декорирование текста

Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).

Вот пример кода:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p style="text-decoration: line-through;">Это зачёркнутый текст.</p>
<p style="text-decoration: underline;">Это подчёркнутый текст.</p>
<p style="text-decoration: overline;">Это надчёркнутый текст.</p>
</body>
</html>

Результатом работы будет такая страница:

HTML Text Align Center (Vertical | Horizontal)

You can set the HTML text-align middle on the webpage or Vertical center or horizontal center. Let’s see one by one example. (Note: Upper example is center the text for Vertical and Horizontal).

HTML Text align vertical center

Using Internal CSS and in <style> use 2 property- “display: table-cell;” and “vertical-align:middle;”

<html>
<head>
<style>
#test {
width: 200px;
height: 200px;
margin: 0;
background-color: gray;
color: white;
display: flex;
display: table-cell;
vertical-align:middle;
}
</style>
</head>

<body>
<h2>Tutorial</h2>
<div>

<p id=»test»>Center Vertical</p>
<div>
</div></div></body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<html> <head> <style> #test { width200px; height200px; margin; background-colorgray; colorwhite; displayflex; displaytable-cell; vertical-alignmiddle; } </style> <head> <body> <h2>Tutorial<h2> <div> <pid=»test»>Center Vertical<p> <div> <div><div><body> <html>

Output:

Значения свойства

Значение	Описание
baseline	Выравнивает базовую линию текущего элемента по базовой линии родителя. Это значение по умолчанию.
length	Поднимает или опускает базовую линию элемента на указанную величину относительно базовой линии родителя. Величина смещения указывается в единицах измерения, применяемых в CSS. При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
%	Поднимает или опускает базовую линию элемента на указанную величину. Величина смещения в процентах расчитывается в зависимости от высоты строки (свойство line-height). При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
sub	Выравнивает элемент, как подстрочный (нижний индекс).
super	Выравнивает элемент, как надстрочный (верхний индекс).
top	Верх элемента выравнивается по верху самого высокого элемента в строке.
text-top	Верх элемента выравнивается с верхом шрифта родительского элемента.
middle	Элемент размещается в середине родительского элемента.
bottom	Низ элемента выравнивается с самым низким элементом в строке.
text-bottom	Низ элемента выравнивается с низом шрифта родительского элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения*:

Значение	Описание
baseline	Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top	Выравнивает содержимое ячейки вертикально по верхнему краю.
middle	Выравнивает содержимое ячейки вертикально по середине.
bottom	Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Property Values

Value	Description	Play it
auto	Default value. The last line is justified and aligned left	Play it »
left	The last line is aligned to the left	Play it »
right	The last line is aligned to the right	Play it »
center	The last line is center-aligned	Play it »
justify	The last line is justified as the rest of the lines	Play it »
start	The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left)	Play it »
end	The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is right-to-left)	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Right-aligned text

Right-aligning text is straightforward with the environment .

\begin{flushright}
Hello, here is some text without a meaning.  This text should show what 
a printed text will look like at this place.  If you read this text, 
you will get no information.  Really?  Is there no information?  Is there 
a difference between this text and some nonsense like not at all!  A 
blind text like this gives you information about the selected font, how 
the letters are written and an impression of the look.  This text should
contain all letters of the alphabet and it should be written in of the
original language.There is no need for special content, but the length of
words should match the language.
\end{flushright}

This  is  the  second  paragraph. Hello, here is some text without 
a meaning.  This text should show what 
a printed text will look like at this place.  If you read this text, 
you will get no information.  Really?  Is there no information?  Is there 
a difference between this text and some nonsense like not at all!  A 
blind text like this gives you information about the selected font, how 
the letters are written and an impression of the look.  This text should
contain all letters of the alphabet and it should be written in of the
original language.There is no need for special content, but the length of
words should match the language.

Text in between and is right-justified. If you prefer the corresponding environment in that package is .

The switch command will also produce right-aligned text, but the behaviour is different; in this case the text will be right-aligned from the point where the command is declared till another switch command is used. This is more suitable for large blocks of text or for the whole document. The equivalent command in is .

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

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

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

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

Пример использования:

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример: