Template:Center/doc: Difference between revisions

(14 intermediate revisions by 2 users not shown)

Line 1:

The <code><<nowiki />center></code> tag in {{w|HTML}} is now deprecated, and there is no one-size-fits-all replacement for it. This template is designed to replicate the tag's functionality using ~~CSS within a~~ <code><<nowiki />div></code> elements as a workaround: {{clear}}

The <code><<nowiki />center></code> tag in {{w|HTML}} is now deprecated, and there is no one-size-fits-all replacement for it. This template is designed to replicate the tag's functionality using nested <code><<nowiki />div></code> elements as a workaround so that they do not need to be typed in every time something needs to be centered:{{clear}}

<~~pre~~><div style="text-align: center; ~~width: auto;~~ margin: auto auto auto auto;">

...

</div></~~pre~~>

...

</div>

</syntaxhighlight>

~~This way, there is no need to manually type out the needed elements every time something needs to be centered~~.

{{tlx|centre}} works as well.

=== Parameters ===

; <code>{{{<nowiki />1}}}</code> ~~'''~~(required)~~'''~~

; <code>{{{<nowiki />1}}}</code> (required)

: One unnamed parameter, consisting of the text to be centered.

: {{escape notice}}

; <code>width</code> ~~'''~~(optional)~~'''~~

; <code>width</code> (optional)

: Pass in the desired width~~; the default value is <code>auto</code>~~.

: Pass in the desired width (if needed).

; <code>top</code> ~~'''~~(optional)~~'''~~

==== Margins ====

Note that, in CSS, margins specified without directional keywords are specified in the order <code><nowiki>style="margin: [top] [right] [bottom] [left];"</nowiki></code>.

; <code>top</code> (optional)

: Pass in the desired upper margin; the default value is <code>auto</code>.

; <code>bottom</code> ~~'''~~(optional)~~'''~~

; <code>bottom</code> (optional)

: Pass in the desired lower margin; the default value is <code>auto</code>.

; <code>both</code> (optional)

: Pass in a desired size to set both upper and lower margins to the same desired value. This will override <code>top</code> and <code>bottom</code>.

@@ Line 1: / Line 1: @@
 {{dochead}}{{wikipedia}}
-The <code><<nowiki />center></code> tag in {{w|HTML}} is now deprecated, and there is no one-size-fits-all replacement for it. This template is designed to replicate the tag's functionality using CSS within a <code><<nowiki />div></code> elements as a workaround: {{clear}}
+The <code><<nowiki />center></code> tag in {{w|HTML}} is now deprecated, and there is no one-size-fits-all replacement for it. This template is designed to replicate the tag's functionality using nested <code><<nowiki />div></code> elements as a workaround so that they do not need to be typed in every time something needs to be centered:{{clear}}
-<pre><div style="text-align: center; width: auto; margin: auto auto auto auto;">
+<syntaxhighlight lang="html">
-...
+<div style="text-align: center;">
-</div></pre>
+    <div style="margin: auto auto auto auto;">
+    ...
+    </div>
+</div>
+</syntaxhighlight>
-This way, there is no need to manually type out the needed elements every time something needs to be centered.
+{{tlx|centre}} works as well.
 === Parameters ===
-; <code>{{{<nowiki />1}}}</code> '''(required)'''
+; <code>{{{<nowiki />1}}}</code> (required)
 : One unnamed parameter, consisting of the text to be centered.
+: {{escape notice}}
-; <code>width</code> '''(optional)'''
+; <code>width</code> (optional)
-: Pass in the desired width; the default value is <code>auto</code>.
+: Pass in the desired width (if needed).
-; <code>top</code> '''(optional)'''
+==== Margins ====
+Note that, in CSS, margins specified without directional keywords are specified in the order <code><nowiki>style="margin: [top] [right] [bottom] [left];"</nowiki></code>.
+; <code>top</code> (optional)
 : Pass in the desired upper margin; the default value is <code>auto</code>.
-; <code>bottom</code> '''(optional)'''
+; <code>bottom</code> (optional)
 : Pass in the desired lower margin; the default value is <code>auto</code>.
+; <code>both</code> (optional)
+: Pass in a desired size to set both upper and lower margins to the same desired value. This will override <code>top</code> and <code>bottom</code>.