Template:Center block/sandbox

{{{1}}}

This is the template sandbox page for Template:Center block (diff).
See also the companion subpage for test cases.

Template documentation[view] [edit] [history] [purge]

This template uses TemplateStyles:

Template:Center block/styles.css

This template uses block elements, e.g. <div> or <p>.
It should not be nested inside an inline element, e.g. <span>, or a template that produces such an element.

This template applies the class(es)
.wst-center-block
that can be targeted with a work's index styles.css using page styles

See H:DIVSPAN for details.

This template is used on approximately 62,000 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

Usage

This template places a block of text in the center of the page, without affecting the text alignment within that block. {{Block center}} is another template which does the same thing.

Comparison of {{Center block}} and {{Center}}

This template retains the current text alignment (usually left), but moves the entire block of text into the center. To change to centered text alignment, use {{center}} instead.

Center block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

Center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

Parameters

All parameters are optional except for the text.

1, text, body: the text to be placed centrally as a block.
title: title of the block.
width: the width of the block (needs units which are valid CSS units).
max-width: the maximum width of the block (needs units which are valid CSS units).
height: the height of the block (needs units which are valid CSS units). Use adds pages to Category:Pages using center block with height parameter.
align: the text alignment within the block. One of left, right, center, justify; default is unspecified and so inherits from the parent.
class: additional CSS classes, which can be used in conjunction with index CSS. The classes wst-center-block and wst-center-block-title are always applied to the block and the title respectively.
style: additional CSS styles (prefer a class if the style is re-used within a work).

title

Where there is a need to give the title of the work, an optional "title" parameter can be used. Sometimes this is will center the title better than a stand-alone line will; other times not - it usually depends on if a fixed width (next example) is forced or not.

Example

{{center block|title=Lorem Ipsum|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor.

Aenean massa.}}

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

width

Where there is a requirement to fix the width of the block, an optional "width" parameter can be used. Sometimes this is required to force a wider width when line wrap occurs.

Example

{{center block|width=25em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor.

Aenean massa.}}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

For exactly the same "spacing" as rendered by normal paragraph(s) before and/or after the template-inserted content:

Example

<p>By clicking the “Save page” button, you are agreeing to the Terms of Use, the Privacy Policy, and you irrevocably agree to release your contribution under the CC-BY-SA 3.0 License and the GFDL. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.</p>

{{center block|width=25em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Aenean commodo ligula eget dolor.

Aenean massa.}}

<p>Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy.</p>

By clicking the “Save page” button, you are agreeing to the Terms of Use, the Privacy Policy, and you irrevocably agree to release your contribution under the CC-BY-SA 3.0 License and the GFDL. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy.

Note: this will force the width even when the page is narrower than the given width, up to the maximum specified by max-width, or 100% if that's not given.

Note: generally, avoid using percentages, as this will probably be unreasonably narrow on small screens. If the content is text, prefer text-relative CSS units, such as em. See H:PXWIDTH for more details.

max-width

This parameter provides a maximum width for the block, such that no matter how wide the parent container, the centered block will be no wider than this. Very often, this is a better choice than width, because it allows content to shrink on smaller screens like e-readers.

Example

{{center block|max-width=15em|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

However, if the parent container is smaller that this value, the block will shrink as normal:

Example

<div style="width:10em; margin:auto;">
{{center block|max-width=15em|
Lorem ipsum dolor sit amet, consectetur adipisicing elit
}}
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

The two parameters can be combined. In this case, the width will be set according to the width parameter on small screens (below the max-width value), and then will be limited to the max-width value on large screens. Note that the width value has to change according to the parent size, so it's normally a percentage value (often 100%).

This is useful when there are floated blocks that don't cause the block to expand to the correct width, but where it's still desirable for the block to shrink on smaller screens:

Example

<div style="width:100%; border:1px dashed green;">
{{center block|max-width=40em|width=100%
|Wide parent: max-width of 40em applies.{{-}}{{float right|''Text on the right.''}}
}}
</div>

Wide parent: max-width of 40em applies.

Text on the right.

Example

<div style="width:30em; margin:auto; border:1px dashed green;">
{{center block|max-width=40em|width=100%
|Narrow parent: 100% width{{-}}{{float right|''Text on the right.''}}
}}
</div>

Narrow parent: 100% width

Text on the right.

height

Example

{{center block|height=15em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Aenean commodo ligula eget dolor.

Aenean massa.}}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

align

The text alignment within the (overall) centered block may be controlled using this parameter.

Example

{{center block|align=right|<poem>
Lorem ipsum dolor sit amet,
{{gap}}consectetuer adipiscing elit.
Aenean commodo ligula eget dolor;
{{gap}}Aenean massa.
</poem>}}

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aenean commodo ligula eget dolor;
Aenean massa.

style

Where there is a need to specify the style of the text, an optional "style" parameter can be used. This parameter takes the same style attributes that can be set for any table.

Example

{{center block|style=font-style:italic|<poem>
Lorem ipsum dolor sit amet,
{{gap}}consectetuer adipiscing elit.
Aenean commodo ligula eget dolor;
{{gap}}Aenean massa.
</poem>}}

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aenean commodo ligula eget dolor;
Aenean massa.

For slightly larger "spacing" between normal paragraph(s) before &/or after the template-inserted content:

Example

<p>By clicking the “Save page” button, you are agreeing to the Terms of Use, the Privacy Policy, and you irrevocably agree to release your contribution under the CC-BY-SA 3.0 License and the GFDL. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.</p>

{{center block|style=max-width:25em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Aenean commodo ligula eget dolor.

Aenean massa.}}

<p>Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy.</p>

By clicking the “Save page” button, you are agreeing to the Terms of Use, the Privacy Policy, and you irrevocably agree to release your contribution under the CC-BY-SA 3.0 License and the GFDL. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.

Aenean massa.

Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy.

Spanning multiple pages

If you use many separate center blocks you will find that every page has a slightly different alignment; however, this template cannot be left "dangling" and closed on another page to create one big center block. If you have a multipage center block, you can use {{Center block/s}} and {{Center block/e}} to open and close it on each page. Every page must have one of each, one at the start and one at the end. However, you may place one or both of them in the header or footer, so they will not be transcluded to the main namespace. When the pages are all transcluded, you will end up with just one {{Center block/s}} and just one {{Center block/e}} at the start and end of the section, respectively. See Help:Page breaks for more information.

First page

Header

Nothing is required in the header

Body

{{center block/s}}

Start of the center block text. Contents of the center block goes here.

Footer

{{center block/e}}

Middle pages

Header

{{center block/s}}

Body

Contents of the center block go here; this continues the previous page.

Footer

{{center block/e}}

Last page

Header

{{center block/s}}

Body

Contents of the center block go here; this continues the previous page. Last bit of center block text.

{{center block/e}}

Footer

Nothing is required in the footer of the last page.

Tracking categories

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools.

Center block

Render content in a centered block

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
text	`text` `1` `body`	Content to place in a centered block	Content	required
title	`title`	Title of the block	Content	optional
class	`class`	Additional CSS classes, which can be used in conjunction with index CSS	Line	optional
height	`height`	The height of the block (needs units which are valid CSS units)	Line	optional
width	`width`	The width of the block (needs units which are valid CSS units)	Line	optional
max-width	`max-width`	The maximum width of the block (needs units which are valid CSS units)	Line	optional
align	`align` `talign`	The text alignment within the block Suggested values `left` `center` `right` `justify` Default inherit	Line	optional
style	`style`	Additional CSS styles	Line	optional

The above documentation is transcluded from Template:Center block/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.