Centring
Centring Grey Brits & Centering Gray Yanks
Table of Contents
A number of situations come to mind were sub-content needs to be centred within the main content or a specific column. Let's take a look at the solutions chosen for this site.
Fixed Dead-Centred
Currently, on this page, there are two fixed containers that are using Centring techniques; the side menu centred on the right and the dead-centred, Progressive Enhancement container in the middle.
After confirming the fixed content by scrolling up and down, select the closing in the container. This will return it to its static position, located here.
by Braveheart
Now, study the code to see how easy it is to accomplish these techniques.
Fixed & Centred Code
First, a suitable width and height to contain the content must be chosen. Use these values to set the CSS properties as follows:
/* Dead-Centred Box */
.deadCentre {
width: 300px;
height: 100px;
margin: -50px 0 0 -150px;
position: fixed;
top: 50%;
left: 50%;
}
/* The side menu */
#menu {
position: fixed;
right: 0px;
top: 50%;
height: 14.4em;
margin: -7.2em 0 0 0;
z-index: 1000;
}
Run this code to re-centre the box without having to refresh the page.
/* Re-centre the box */
$('.deadCentre').css({'position': 'fixed', 'margin': '-45px 0 0 -140px'});
Single Line Centred Items
If all we need to do is centre a single item, such as an image, then the following example is using a good cross-browser solution.
Centred In-line Content Code
<!-- Markup -->
<p class="centre"><img src="/i/css3.png" alt="CSS3"/></p>
/* CSS */
.centre {
text-align: center;
width:100%;
}
Multi-Line Centred Containers
To shrink wrap and format two or more lines of content, a bit more work is required in order to add varying width.
Setting a max-width on the container allows it to remain fluid at narrow widths and not grow too big when the device width widens.
Centred Content
With an image floated to the right.
But what happens when the next line is longer? It probably needs a dynamic max-width set on it depending on its content and location. This has max-width: 20em; set on it as a style attribute.
By Billy Wallace
Centred Block Content
<!-- Markup -->
<div class="centre-out" style="max-width: 20em;">
<aside class="centre-in round">
<h4><img src="URL" alt="TEXT" title="TEXT" class="right">HEADER</h4>
<p>PARA</p>
<p class="signature">By Billy Wallace</p>
</aside>
</div>/* CSS */
.centre-out {
display: table;
margin: 1em auto;
}
.centre-in {
background-color: #ff9;
display: table-cell;
padding: 10px;
}
/* ie.css */
.centre-out {
*display: block;
*margin: 1em 0;
*text-align: center;
}
.centre-in {
*display: inline;
_height: 0;
*zoom: 1;
}
Auto-Centred Column
A popular, cross-browser solution to auto-centre a column of content is achieved using margins and width. This technique is used on this site on a number of occasions. The code example will focus on the <body>, which is auto centred within the <html> tag, which defaults to the full width of the viewport.
Auto-Centred Body
/* CSS */
body {
margin: 1em auto;
width: 96%;
}
#content {
margin: 1em;
}
/* ie.css */
body {
_text-align: center;
}
#content {
_text-align: left; /* auto-centre fix IE */
}
Read more about fluid and responsive Layouts.