Difference between revisions of "Help:Wiki University Wikitext--Alignment"
Jump to navigation
Jump to search
m (→Vertical alignment: Minor correction of code example) |
|||
| Line 43: | Line 43: | ||
*Let's make a container or box with a div tag that is 50px in height with a line of text. | *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. | *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 the coding: | + | *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="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="blue">line-height:</font color><font color="red">50px</font color>; <font color="blue">text-align:</font color><font color="red"> | + | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="blue">line-height:</font color><font color="red">50px</font color>; <font color="blue">text-align:</font color><font color="red">center</font color>">This text is in the middle<nowiki></div></nowiki></div><br> |
<div style="width:100%; height:50px; text-align:center; line-height:50px; border:1px solid red">This text is in the middle.</div> | <div style="width:100%; height:50px; text-align:center; line-height:50px; border:1px solid red">This text is in the middle.</div> | ||
Revision as of 20:25, 11 November 2015
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Links
- Broken Links
- Comments
- Categories
- Image Embedding
- Image Tooltips & Borders
- Image Links
- Images & Text; Embedding PDF
- Snipping Tool & Paint
- Paragraphs
- Inline Styling
- Changing Fonts
- Font Colors
- Backgrounds
- Multi-attributes
- Font Bold-Italics
- Div Tag - Intro
- Borders
- Padding
- Margins
- Width and Height
- Alignment - Horizontal
- Tables
- Breadcrumb Trails
- Ref/Footnotes
- SEO
Intermediate
Advanced
Flexbox
Additional Helps
| << Previous Chapter | Next Chapter >> |
Alignment[edit | edit source]
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
|
|
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]
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
