Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
text-align

text-align

Specifies the alignment position for inline content such as inline-level elements.

Sample Code

style.css

/* left: align left (default) */
p.test { text-align: left;}

/* right: align right */
p.test2 { text-align: right;}

/* center: center alignment */
p.test3 { text-align: center;}

/* justify: justify both edges (even spacing, common for body text) */
p.test4 { text-align: justify;}

/* Center inline content inside a block */
.container { text-align: center;}

/* Right-align navigation links */
nav { text-align: right;}

/* Logo left, menu right in a header */
.header-left { text-align: left;}
.header-right { text-align: right;}

Available Values

Value	Description
start	For languages read left-to-right (such as Japanese or English), the rendering is the same as 'left'; for languages read right-to-left, the rendering is the same as 'right'. This 'start' is the initial value.
left	Aligns content to the left.
right	Aligns content to the right.
center	Aligns content to the center.

Browser Display Result

<p style="border: solid 1px black; text-align: left;">This is a p element.</p>

<p style="border: solid 1px black; text-align: right;">This is a p element.</p>

<p style="border: solid 1px black; text-align: center;">This is a p element.</p>

Details

Specifies the alignment position for inline content such as inline-level elements.

Note that alignment can only be applied to inline content such as inline-level elements (span, img, etc.). To position block-level elements or table elements, use the 'margin' property instead.

<div style="border: solid 1px black; text-align: center;">
	<p style="background-color: yellow; width: 300px; margin: 0;">This is a p element with a width of 300px. Although 'text-align: center' is specified on the parent div element, this p element is a block-level element so it is not centered. However, this text inside the p element is inline content, so it is displayed centered.</p>
</div>

<div style="border: solid 1px black;">
	<p style="background-color: yellow; width: 300px; margin: 0 auto;">This is a p element with a width of 300px. 'margin: 0 auto' is specified on the p element to center it.</p>
</div>