View source for Template:Block center/doc

{{documentation subpage}}
{{div-based-template|class=.wst-block-center}}
==Usage==
This template places a block of text in the center of the page, without affecting the text alignment within that block.

{{tl|bc}} is a shorter form of this template that redirects here.


;Comparison of <nowiki>{{Block center}}</nowiki> and <nowiki>{{Center}}</nowiki>
This template retains the current text alignment (usually left), but moves the entire block of text into the center. To change to centred text alignment, use {{tl|Center}} instead.

:;Block center
{{block center|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor.

Aenean massa.}}

:;Center:
{{center|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor. 

Aenean massa.}}


===Parameters===

All parameters are optional.

* {{parameter|title}}: Title of the block (optional)
* {{parameter|width}}: the width of the block
* {{parameter|max-width}}: the maximum width of the block. Optional: default 100%.
* {{parameter|align}}: the text alignment within the block. One of <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>, default is unspecified and so inherits from the parent.
* {{parameter|class}}: additional CSS classes, which can be used in conjunction with [[Help:Page styles]] CSS. The classes <code>wst-block-center</code> and <code>wst-block-center-title</code> are always applied to the block and to the title respectively.
* {{parameter|style}}: additional CSS styles (prefer a class if the style is re-used within a work)

===={{parameter|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.
<pre>{{block center|title=LOREM IPSUM|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor.

Aenean massa.}}</pre>


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

Aenean massa.}}

===={{parameter|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.
<pre>{{block center|width=25em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
Aenean commodo ligula eget dolor.

Aenean massa.}}</pre>


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

Aenean massa.}}

Note: this will force the width even when the page is narrower than the given width, up to the maximum specified by {{parameter|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.

===={{parameter|max-width}}====

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

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

{{block center|max-width=15em|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:

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

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

The two parameters can be combined. In this case, the width will be set according to the {{parameter|width}} parameter on small screens (below the max-width value), and then will be limited to the {{parameter|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:

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

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

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


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

===={{parameter|align}}====
The text alignment within the (overall) centered block may be controlled using this (default: left):
<pre>{{block center|align=right|<poem>
Lorem ipsum dolor sit amet,
{{gap}}consectetuer adipiscing elit.
Aenean commodo ligula eget dolor;
{{gap}}Aenean massa.
</poem>}}</pre>


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

==Spanning multiple pages==

If you use many separate block centers 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 block center.  If you have a multipage block center, you can use {{tl|block center/s}} and {{tl|block center/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 {{tl|block center/s}} and just one {{tl|block center/e}} at the start and end of the section, respectively.

===First page===

;Header
Nothing is required in the header

;Body
 <nowiki>{{block center/s}}</nowiki>
 Start of the block center text.
 Contents of the block center goes here.

;Footer
 <nowiki>{{block center/e}}</nowiki>

===Middle pages===

;Header
 <nowiki>{{block center/s}}</nowiki>

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

;Footer
 <nowiki>{{block center/e}}</nowiki>

===Last page===

;Header
 <nowiki>{{block center/s}}</nowiki>
 
;Body
 Contents of the block center go here; this continues the previous page.
 Last bit of block center text
 <nowiki>{{block center/e}}</nowiki>

;Footer
Nothing is required in the footer of the last page.

==See Also==
* {{tl|Center block}}

<!-- template categories and interwiki links -->
<includeonly>
[[Category:Formatting templates|Block center]]
</includeonly>
<templatedata>
{
	"params": {
		"class": {
			"label": "class",
			"description": "additional CSS classes, which can be used in conjunction with Help:Page styles CSS. The classes wst-block-center and wst-block-center-title are always applied to the block and to the title respectively.",
			"type": "content"
		},
		"width": {
			"label": "width",
			"description": "The width of the block (needs units which are valid CSS units.)",
			"type": "content",
			"suggested": true
		},
		"talign": {
			"aliases": [
				"align"
			],
			"label": "talign",
			"description": " the text alignment within the block. One of left, right, center, justify, default is unspecified and so inherits from the parent.",
			"suggestedvalues": [
				"left, right, center"
			],
			"suggested": true
		},
		"max-width": {},
		"style": {
			"label": "style",
			"description": "Additional CSS styles (prefer a class if the style is re-used within a work)",
			"type": "content"
		},
		"title": {
			"label": "title",
			"description": "Title of the block",
			"type": "content"
		},
		"body": {
			"aliases": [
				"1"
			],
			"label": "body",
			"description": "The text to be placed centrally as a block",
			"type": "content"
		}
	},
	"format": "block"
}
</templatedata>