Help:Wiki University HTML-- Alignment

From FamilySearch Wiki
Jump to: navigation, search
HTML WIKI WIKI MISSIONARY WIKITEXT VISUAL EDITOR

Chapters
1. HOME
2. Introduction
3. Headers
4. Lists
5. Nesting Lists
6. Comments
7. Paragraphs
8. Fonts - Changing
9. Font Size
10. Font Colors
11. Font Bold-Italics
12. Multi-attributes
13. Backgrounds
14. Padding
15. Div Tag - Intro
16. Margins
17. Borders
18. Width and Height
19. Alignment
20. Tables
21. Tables - Borders
22. Tables - Widths
23. Tables - Captions
24. Tables - Col Labels
25. Tables - Cells
26. Tables - Rows
27. Tables - Placement
28. Tables - Sorting
29. Tables - Scrolling
30. Tables - Col Only
31. Tables - Col Spans
32. Tables - Row Spans
33. Infobox - Creating
34. Infobox - Placing
35. Infobox - If function
36. Sidebars
37. Navboxes
38. Position - Relative
39. Position - Absolute
40. Tabs
41. Misc
Flexbox
37. Flexbox Training



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