Template:Vertical alignment

From MozillaWiki
Jump to: navigation, search

{{{1}}}

Documentation icon Template documentation[view] [edit] [history] [purge]

Usage

{{valign}} (or {{vertical alignment}}) changes the vertical alignment of the entered span of text or object through the CSS property "vertical-align".

Parameters

There are 3 parameters, 2 unnamed, of which 1 is required and 1 is optional, and 1 which is named and optional.

Syntax

The template's syntax is

  • {{valign|custom text/object |alignment value |style= }}

Required parameter

1

Custom text/object

The text or object (e.g. image) for which you wish to change the vertical alignment. The parameter is unnamed, so no parameter name needs to be entered.

Usage
  • {{valign|1}}

Optional parameters

2

CSS vertical-align value

By default, the template sets the vertical alignment to the value middle, i.e. vertically center-aligned. You can enter a custom line height value, if you want to. There are different ways of specifying this value. See the available value types below, under Available values. The parameter is unnamed, so no parameter name needs to be entered.

Note
  • If the entered value doesn't conform to valid CSS values, the template will output the text using the default value ({{samp|middle}).
  • If used, this parameter must be placed after the 1st unnamned parameter.
Usage
  • {{valign|1|2}}

style

Custom CSS styling

You can override the default output styling by using this parameter to specify CSS properties with appropriate values.

Note
  • When entering the CSS properties and values, use the normal format, separating the property from its value with a colon (:), and ending each property:value pair with a semicolon (;), e.g. css-property-1:value1; css-property-2:value2; css-property-3:value3;. But, don't enclose the entry in double quotation marks ("…"). That is done automatically.
Usage
  • {{valign|1|2|style=property-1:value1;  property-2:value2;}}

Available values

For setting the vertical alignment (parameter 2), there are a range of possible values.

Type Value type Value Template default Comments
CSS CSS value baseline Aligns the baseline of the element with its parent's baseline.
middle Green check.png Vertical center-alignment.
sub Subscript.
super Superscript.
text-top Aligns the top of the element with the top of the parent element's font.
text-bottom Aligns the bottom of the element with the bottom of the parent element's font.
top Aligns to the top of the tallest element on the line.
bottom Aligns to the bottom of the lowest element on the line.
inherit Inherits the value from its parent.
Length a) Number value + px/em e.g. 14px Raises or lowers the element by the value. 0cm is baseline. Can be a negative value. Decimal point, no comma.
e.g. 2.5em
Percentage a) Number value + % e.g. 125% Raises or lowers the element by the percentage value. 0% is baseline. Can be a negative value.

a) When using length or percentage, there can't be any space character between the number value and its unit (px or em for length, and % for percentage).

Examples

Alignment
Element Value What you type What you see
Text
(none)
Sample text}}
(Parent)  Sample text
baseline
Sample text|baseline}}
(Parent)  Sample text
middle
Sample text|middle}}
(Parent)  Sample text
sub
Sample text|sub}}
(Parent)  Sample text
super
Sample text|super}}
(Parent)  Sample text
text-top
Sample text|text-top}}
(Parent)  Sample text
text-bottom
Sample text|text-bottom}}
(Parent)  Sample text
top
Sample text|top}}
(Parent)  Sample text
bottom
Sample text|bottom}}
(Parent)  Sample text
inherit
Sample text|inherit}}
(Parent)  Sample text
…px
Sample text|40px}}
(Parent)  Sample text
…em
Sample text|-2em}}
(Parent)  Sample text
…%
Sample text|-200%}}
(Parent)  Sample text
Image
(none)
[[File:Idea.png|20px|link=]]}}
(Parent)  Idea.png
baseline
[[File:Idea.png|20px|link=]]|baseline}}
(Parent)  Idea.png
middle
[[File:Idea.png|20px|link=]]|middle}}
(Parent)  Idea.png
sub
[[File:Idea.png|20px|link=]]|sub}}
(Parent)  Idea.png
super
[[File:Idea.png|20px|link=]]|super}}
(Parent)  Idea.png
text-top
[[File:Idea.png|20px|link=]]|text-top}}
(Parent)  Idea.png
text-bottom
[[File:Idea.png|20px|link=]]|text-bottom}}
(Parent)  Idea.png
top
[[File:Idea.png|20px|link=]]|top}}
(Parent)  Idea.png
bottom
[[File:Idea.png|20px|link=]]|bottom}}
(Parent)  Idea.png
inherit
[[File:Idea.png|20px|link=]]|inherit}}
(Parent)  Idea.png
…px
[[File:Idea.png|20px|link=]]|40px}}
(Parent)  Idea.png
…em
[[File:Idea.png|20px|link=]]|-2em}}
(Parent)  Idea.png
…%
[[File:Idea.png|20px|link=]]|-200%}}
(Parent)  Idea.png
Styling
Case What you type What you see
Param style Sample text|style=font-family: Garamond; background-color: orange;}} Sample text
Wiki-formatting You ''can'' '''use''' {{sup|wiki}} <big>markup</big>}} You can use wiki markup

See also