CSS Horizontal & Vertical Align
The CSS Align property is used to define the horizontal and vertical alignment of an inline or table-cell box.
Align Elements
- text-align: center
- text-align: right
- vertical-align
- float property
CSS text-align: center Property
CSS text-align: center property use to align the text content to the center of the div:
Example of text-align: center
.div {
background-color: red;
border: 1px solid green;
padding: 10px;
height: 50px;
text-align: center;
color: #fff;
}
Output
Hello! This is a text-line with text-align:center property
CSS text-align: right Property
CSS text-align: right property use to align the text content to the right of the div:
Example of text-align: right
.div {
background-color: #fff;
border: 1px solid green;
padding: 10px;
height: 50px;
text-align: right;
color: red;
}
Output
Hello! This is a text-line with text-align:right property
CSS vertical-align Property
CSS vertical-align property use to align an image vertically with the text by using vertical-align property:
Example of vertical-align
.div {
background-color: #fff;
padding: 10px;
color: red;
}
Output
Hello!
CSS float Property
CSS float property use to align elements:
Example of float
.div {
background-color: #fff;
border: 1px solid green;
padding: 10px;
width: 200px;
float: right;
color: green;
}
Output
Hello! This is a text-line with float CSS property