Alignment properties allows developers to specify how text should be positioned within an element. We will focus purely on the text-align: property, which specifies horizontal placement of text in an element.
This property should only be passed keywords. The possible values are;
leftcenterrightjustifyIn the following code, a simple paragraph with Lorem Ipsum text is aligned using the above property declaration values.
.parent-1 {
height: 200px;
background-color: #12f388;
}
.parent-1 p {
background-color: #fff;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.
Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.
Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.
Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.Ex voluptate id veniam minim tempor deserunt adipisicing in nisi fugiat non laboris reprehenderit amet reprehenderit.
| [View on GitHub] | [Live Example] |