Alignment & Indentation
Aligning your headers or captions can help draw the eye visually to new text events on the page. Likewise, indents can be used to breakup points introduced under a common topic, or delineate new paragraphs.
Text Alignment
Alignment properties allows developers to specify how text should be positioned within an element.
Horizontal
The text-align: property specifies horizontal placement of text in an element.
Values
This property should only be passed by keywords. The possible values are:
leftcenterrightjustify
Example
In the following code, a simple paragraph with Lorem Ipsum text is aligned using the above property declaration values.
Left
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.
Right
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.
Center
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.
Justified
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.
Vertical
The vertical-align: property specifies vertical placement of text in relation to an inline element, usually images.
Values
The property should only be passed by keywords. The most common used inlcude:
toptext-topmiddlebottomtext-bottom
Example
Common Image File Types for Web
JPEG/JPG
PNG
GIF
Text Indent
First line indents are another typesetting property that CSS allows for the manipulation of. This property is controlled via text-indent: .
This property controls how much the first line of a paragraph is indented.
As with many text properties, this once can be passed absolute values with pixels (px) or points (pt). It can also be passed relative values, such as ems.
Example
In the following example, the text-indent property adjusts the indentations of three paragraph elements inside a “parent” (.parent-1) div element.
Ex reprehenderit officia pariatur mollit aliquip eu cillum magna quis. Labore officia incididunt quis laboris veniam quis veniam ad sunt. Minim fugiat consectetur ad consectetur eiusmod quis nostrud do. Deserunt laboris est commodo id Lorem mollit nostrud. Cupidatat culpa officia consequat proident duis nostrud quis nostrud incididunt commodo dolore sit velit.
Laboris excepteur amet incididunt cupidatat tempor non veniam reprehenderit aute minim qui quis ullamco mollit officia nostrud duis. Ut do nulla excepteur ex magna labore labore commodo. Lorem laborum minim occaecat tempor veniam ad consectetur adipisicing magna.
Et et commodo veniam do do enim nisi aliquip enim. Elit nisi officia esse aute ea mollit cillum exercitation. In in mollit laboris officia commodo pariatur mollit ipsum do est do.
{ TODO: }
Read pages 285-288 of Chapter 12 in Duckett.