CSS Horizontal & Vertical Align

CSS Horizontal & Vertical Align

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 -
Output -