CSS Horizontal and Vertical Alignment -
1. Horizontal Alignment -
Horizontal alignment is controlled by the text-align property.
This only has an effect on block elements with a width greater than that of their content.
Valid values are -
-
left
-
right
-
center
-
Justify
Now we will see Example -
Example - Setting the text alignment -
class="hello">Hello world!
|
Output -
The text is horizontally centered.
text-align doesn’t just affect text. It sets the horizontal alignment of any inline element inside the containing element on which text-align is set.
2. Vertical Alignment -
If a block element's height is taller than its content, by default the text will be aligned to the top of the container.
You might think the vertical-align property would help here but setting vertical-align: center would have no effect. One way to solve this problem is to set the line-height to the same as the container height.
Example -
Vertically centering text with the line-height property
class="hello">Hello world!
|
Output -
The text is vertically centered.
How does the vertical-align property work, then? It controls how inline elements are aligned vertically with each other.
Example 2 - Two span elements -
class="container">
class="hello">Hello
class="world">World!
|
Output -
