Template:Vertical alignment
{{{1}}}
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 | 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)
|
baseline |
[[File:Idea.png|20px|link=]]|baseline}} | (Parent)
| |
middle |
[[File:Idea.png|20px|link=]]|middle}} | (Parent)
| |
sub |
[[File:Idea.png|20px|link=]]|sub}} | (Parent)
| |
super |
[[File:Idea.png|20px|link=]]|super}} | (Parent)
| |
text-top |
[[File:Idea.png|20px|link=]]|text-top}} | (Parent)
| |
text-bottom |
[[File:Idea.png|20px|link=]]|text-bottom}} | (Parent)
| |
top |
[[File:Idea.png|20px|link=]]|top}} | (Parent)
| |
bottom |
[[File:Idea.png|20px|link=]]|bottom}} | (Parent)
| |
inherit |
[[File:Idea.png|20px|link=]]|inherit}} | (Parent)
| |
…px |
[[File:Idea.png|20px|link=]]|40px}} | (Parent)
| |
…em |
[[File:Idea.png|20px|link=]]|-2em}} | (Parent)
| |
…% |
[[File:Idea.png|20px|link=]]|-200%}} | (Parent)
|
- 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
- {{align}}: horizontal alignment.
- {{lineheight}}: set the line height.
- {{resize}}: text resizing.
The above documentation is transcluded from Template:Vertical alignment/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |