Help:Wiki University Wikitext--Alignment

From FamilySearch Wiki
Revision as of 20:25, 11 November 2015 by Psleavens (talk | contribs) (→‎Vertical alignment: Minor correction of code example)
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps


<< Previous Chapter Next Chapter >>

Alignment[edit | edit source]

Heading-align.png

Centering titles[edit | edit source]

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[edit | edit source]

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.


Vertical alignment[edit | edit source]

When we place some text in a div or paragraph tag that is taller than the text we are placing, the text will appear at the top of the container. What if we want the text in the middle of the container. To do that, we use the combination of text-align and line-height attributes.

  • Let's make a container or box with a div tag that is 50px in height with a line of text.
  • Next we need to combine the text-align with line-height.
  • If we set the height of the line-height to 50 pixels, the text will be in the middle of the container. Here is the coding:
<div style="line-height:50px; text-align:center">This text is in the middle</div>

This text is in the middle.

Try these out[edit | edit source]

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