Template:Vertical alignment

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		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

See also

• {{align}}: horizontal alignment.
• {{lineheight}}: set the line height.
• {{resize}}: text resizing.