Help:Wiki University HTML-- Alignment

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

ALIGNMENT

Heading-align.png

CENTERING TITLES

Often you may want to center a title rather than allow it to remain in the default position on the left. So how do you center a title?

We use the attribute:

text-align:center

  • This attribute works for headings, paragraphs and div tags.

Here is the coding with a border, which will not be shown in the coding, so you can see the alignment:

<div style="text-align:center">This title is centered</div>

This title is centered

RIGHT OR LEFT

This alignment attribute also can be for to the left or right like so:

Here is the coding:

<div style="text-align:right">This title is on the right</div>

This title is on the right

Here is the coding:

<div style="text-align:left">This title is on the left</div>

This title is on the left

text-align:right
text-align:left

Html7.jpg

Alignment by default is to the left, but there are occasions when something is on the right and you want it on the left side of the page.

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Take this title: "I Love Wikitext" and put it on the center of the page.
  • Take this title: "I Love Wikitext" and put it on the right of the page.
  • Take this title: "I Love Wikitext" and put it on the left of the page.


Quick Quiz
  • Text-align only works in header tags
A. True
B. False
  • Text-align cannot put a title to the left because that is the default position.
A. True
B. False
  • Text-align will work in header, paragraph and div tags
A. True
B. False

Navigation menu