Как прижать текст к правому краю в css

Выравнивание текста в CSS: свойство text-align

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Пример записи стиля:

Рекомендации по использованию стилей

На скриншотах показаны примеры использования различных значений для свойства CSS text-align:

Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left. Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right. Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо. Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией). Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.

How to put text in the upper right, or lower right corner of a "box" using css

How would I get the here and and here to be on the right, on the same lines as the lorem ipsums? See the following:

9 Answers 9

Gets you pretty close, although you may need to tweak the «top» and «bottom» values.

Float right the text you want to appear on the right, and in the markup make sure that this text and its surrounding span occurs before the text that should be on the left. If it doesn’t occur first, you may have problems with the floated text appearing on a different line.

Note that this works for any line, not just the top and bottom corners.

If the position of the element containing the Lorum Ipsum is set absolute, you can specify the position via CSS. The «here» and «and here» elements would need to be contained in a block level element. I’ll use markup like this.

Here’s the CSS for above.

Again, the above only works (reliably) if #lipsum is positioned via absolute.

If not, you’ll need to use the float property.

You’ll also need to put your markup in the appropriate place. For better presentation, your two divs will probably need some padding and margins so that the text doesn’t all run together.

text-align

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

Try it

Syntax

The text-align property is specified in one of the following ways:

• Using the keyword values start , end , left , right , center , justify , justify-all , or match-parent .
• Using a <string> value only, in which case the other value defaults to right .
• Using both a keyword value and a <string> value.

Values

The same as left if direction is left-to-right and right if direction is right-to-left.

The same as right if direction is left-to-right and left if direction is right-to-left.

The inline contents are aligned to the left edge of the line box.

The inline contents are aligned to the right edge of the line box.

The inline contents are centered within the line box.

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

Same as justify , but also forces the last line to be justified.

Similar to inherit , but the values start and end are calculated according to the parent’s direction and are replaced by the appropriate left or right value.

When applied to a table cell, specifies the alignment character around which the cell’s contents will align.

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

CSS Text Align – Centered, Justified, Right Aligned Text Style Example

Kolade Chris

We use the CSS text-align property to align content inside a block-level element.

Examples of block-level elements are paragraphs ( <p>. </p> ), divs ( <div>. </div> ), sections ( <section>. </section> ), articles ( <article>. </article> ), and so on.

This alignment affects the horizontal axis only. So the text-align property is different from the vertical-align property which we use to set the vertical alignment of an element.

Table of Contents

Basic Syntax

Here’s the basic syntax for the text-align property:

Now we’ll look at the different values it can take to help you position things on the page.

Values of the text-align Property

The text-align property accepts left , center , right , justify , and inherit as values.

We will take a look at these values one by one.

Before I dive into the values and what they look like in the browser, take a look at the below CSS. I set these styles for improved visibility, so you can see things better:

The left Value

The left value of the text-align property is the default. So, every content inside a block-level element is aligned to the left by default.

If you want the content inside a block-level element to align to the left, you don’t need to assign it a text-align value of left . If you do, you’re just duplicating what’s already the default.

The center Value

With the center value, spaces are created on the left and right, so, everything gets pushed to the center.

If you want to align the content inside a block-level element to the center, the center value is your best bet.

The right Value

Assigning a value of right to the text-align property pushes the content inside a block-level element to the right.

The justify Value

The justify value of the text-align property lines up the content on the left and right edges of the block-level element (the box). If the last line isn’t a full line, then it leaves it alone. It’s easier to see how this works in the image below:

The inherit Value

The inherit value of the text-align property behaves as the name implies. An element with its text-align value set to inherit inherits the text-align value of its direct parent.

In this case, our div inherits the text-align value of the body – which is left by default.

If the text-align value of the body is set to right , and that of the div is left to inherit, the text inside the div aligns to the right.

Conclusion

In this article, you learned about the CSS text-align property and its values.

The examples we looked at here to see how the values behave contained text only – so you might be wondering if the values work on images too. Well, yes they do.