Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Text Alignment

Text Alignment and Text Direction

This chapter will cover the following properties:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Text Alignment

The text-align property is employed to determine the horizontal alignment of text.

Text can be aligned to the left, right, centered, or justified.

Below is an example illustrating center-aligned text, as well as left and right-aligned text. (Left alignment is default when the text direction is left-to-right, and right alignment is default when the text direction is right-to-left):

Example

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

If the text-align property is specified as “justify”, each line is expanded to ensure uniform width, resulting in straight left and right margins, akin to magazines and newspapers.

Example

div {
text-align: justify;
}

Text Align Last

The text-align-last property determines the alignment of the final line of text.

Example

Adjust the alignment of the final line of text within three <p> elements.

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

Text Direction

The direction and unicode-bidi properties enable altering the text’s direction within an element.

Example

p {
direction: rtl;
unicode-bidi: bidi-override;
}

Vertical Alignment

The vertical-align property determines the vertical positioning of an element.

Example

Adjust the vertical alignment of an image within a block of text.

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

The CSS Text Alignment/Direction Properties

Property	Description
direction	Specifies the direction of text or writing.
text-align	Specifies the horizontal positioning of text.
text-align-last	Specifies the alignment of the last line of text.
unicode-bidi	When combined with the direction property, it sets or retrieves whether the text should be overridden to accommodate multiple languages within the same document.
vertical-align	Specifies the vertical positioning of an element.