Template:Center: Difference between revisions
(Created page with "<center>{{{1}}}</center><noinclude>{{doc}}</noinclude>") |
RogueScholar (talk | contribs) (Transition from deprecated HTML4 tags to CSS 3.0 style declarations for maximum browser compatibility) |
||
Line 1: | Line 1: | ||
<center>{{{1}}}</ | <includeonly><div class="center" style="width: auto; margin-left: auto; margin-right: auto; {{#if: {{{style|}}} | {{{style}}}}}">{{{1|[[Category:Pages using center with no arguments]]}}}</div></includeonly><noinclude> | ||
{{Doc}} | |||
<!-- Add categories to the /doc subpage, not here --> | |||
</noinclude> |
Latest revision as of 05:28, 1 May 2021
Description
This template's purpose is to center any elements supplied to it on the page, regardless of the browser used and the width of the display or window. This is done by wrapping the contents in </div><div> HTML5 tags that have the following CSS 3.0 properties:width: auto; margin-left: auto; margin-right: auto;
Usage
Simply place any valid Wikitext you wish to appear centered as the contents of the (only) unnamed parameter, as in...
{{Center|Elements (text, images, etc.) to be centered here}}
...which is rendered by the parser as:
Additional CSS properties
This template does have one named parameter, style
, which can be used to pass additional CSS properties to the wrapping <div> tags. The properties should be well-formed CSS 3.0, with colon-delimited property names and all values terminated with a semicolon. As an example, if it was desired to have the template's output be double-spaced below the preceding text and in a larger, bold font, it would look like...
{{Center|style=margin-top: 2em; font-size: larger; font-weight: bold;|Elements (text, images, etc.) to be centered here}}
...which is rendered as:
Bare HTML tags
To do this without a template, simply use the following HTML code, replacing the '...' with any standard Wikitext you want to appear centered on the page (multiple lines are acceptable, too):
<div class="center" style="width: auto; margin-left: auto; margin-right: auto;">...</div>
See also
- {{Float}}