Template:CenterAlignIcon: Difference between revisions
Jump to navigation
Jump to search
imported>Sekoia No edit summary |
imported>Sekoia No edit summary |
||
| Line 1: | Line 1: | ||
<span style="position: relative;"><span style="position: absolute; left: {{#expr: {{{width|24}}} + 4}}px;">{{{text}}}</span>[[{{{image}}}|{{{width|24}}}px|{{{hover|{{{image}}}}}}]]</span> | <includeonly><span style="position: relative;"><span style="position: absolute; left: {{#expr: {{{width|24}}} + 4}}px;">{{{text}}}</span>[[{{{image}}}|{{{width|24}}}px|{{{hover|{{{image}}}}}}]]</span></includeonly><noinclude>{{documentation}}</noinclude> | ||
Latest revision as of 04:00, 15 November 2010
[edit] [] Documentation
Usage
This template will allow a column of icons to be aligned such that their icons are all in a vertical column, irrespective of whatever text is to their right. In order for them to center align, they must be in a context that is centered.
Permissible option:
- width=
- The width of the image to use, in pixels. Required.
- text=
- The text to show at the right. Required.
- image=
- The image to show. Required.
- hover=
- The text do display if the mouse is hovered over the image. Default is {{{image}}}.
Examples
| Template Call | Result |
|---|---|
| {{CenterAlignIcon|width=24|text=33%|image=File:TO Training Endurance Cost.png|hover=Endurance Cost}} | 33%
|
| {{CenterAlignIcon|width=24|text=16.5%|image=File:TO Training Fear Duration.png|hover=Fear Duration}} | 16.5%
|
Caveat
This is only intended to be used as illustrated above. If you use it in other contexts, you will likely get overlapping text/icons. For example, this usage:
{{CenterAlignIcon|width=24|text=33%|image=File:TO Training Endurance Cost.png|hover=Endurance Cost}}{{CenterAlignIcon|width=24|text=16.5%|image=File:TO Training Fear Duration.png|hover=Fear Duration}}
Results in this:
33%16.5%