text on left and right side of element
Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?
Thus ending up with the following layout: 
The container has a fixed width, so I don’t want to use positioning, because I know I don’t have to.
2 Answers 2
(1) Add two divs within the element that contain each text string
(2) Float the two divs next to each other
(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).
You can place your two items inside the same container and float them into the right position.
HTML Alignment
This article tells you how to align a text or a container to various positions. We can align them directly in HTML code otherwise we can create a separate CSS file to do so.
Align Left
Set the align attributes value as left to align contents to the left.
Align Right
Set the align attributes value as right to align contents to the right.
Align Center
Set the align attributes value as center to align contents to the center.
Text Align Center
Set the value of the text-align attribute as center to align text to the center.
Text Align Right
Set the value of the text-align attribute as right to align text to the right.
Text Align Left
Set the value of the text-align attribute as left to align text to the left.
Align Attribute
Justify adds space between words so that the edges of each line are aligned with both margins.
Свойство CSS text-align
Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.
Синтаксис CSS text-align
- center — выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
- justify — растягивание текста по всей ширине области
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- inherit — принять значение предка (родителя)
Чаще всего эти свойства применяются в блоках <div> и абзацах <p>.
Примечание:
Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.
Как сделать выравнивание текста в html
Пример №1. Выравнивание текста по левому краю
Выравнивание текста по левому краю. Действуют по умолчанию.
На странице преобразуется в следующее
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
На странице преобразуется в следующее
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
На странице преобразуется в следующее
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Разница в тегах <div> и <p> в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
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.