During website creation it's not uncommon to want to center elements within a certain space. In this tutorial we'll be going over the different ways an element can be horizontally centered.
Centering 'inline' or 'inline-block' elements
Centering inline or inline-block elements in CSS is childishly simple. So simple in fact that it requires the use of only one property - text-align. That's right, despite its name, using a good 'ol text-align: center; on a parent should center any inline or inline-block elements within that parent. The property does of course work on text too and hence is used for a whole lot of centering. So if we wanted to center an image on a webpage we could do one of a number of things. We could set the whole body to have text-align: center; (if all the rest of the body text being centered is desired), or we could wrap it in a div and then give that div text-align: center; (if we want the text to remain left aligned but the image to be center aligned). Something like the following could illustrate the latter solution:
1
2
3
| <div class="align_center">
<img src="http://www.dev-hq.net/images/logo.png/" />
</div>
|
1
2
3
| .align_center {
text-align: center;
}
|
This obviously works because the div is a block element, thus takes up 100% of the width available to it, and the image inside should center within this.
Centering block elements
Block elements that have a set width can also be centered very easily in CSS using a little margin trick. Centering an element with width is basically the same as setting the space to its left and right to the same - we can do this by setting the left and right margins to auto. It's worth noting that you can also accomplish this using the margin shorthand property if you also want to set the margin-top and margin-bottom values at the same time - something like margin: 10px auto; will work fine. So if we want to create a division that is centered perfectly within the page - we might write something like the following:
1
2
3
| <div id="main_content">
<!-- Some content here -->
</div>
|
1
2
3
4
5
6
7
8
| #main_content {
width: 60%;
min-height: 100px;
padding: 2%;
background: #3e3e3e;
margin-left: auto; /* These are the */
margin-right: auto; /* important lines! */
}
|
Centering with positioning
If you're already using positioning on an element - why not use this to center the element horizontally? The concept is really simple, you push the whole thing exactly 50% across the page, and then take away half of it's total width (including padding!) so it's in the dead center. It's worth noting that this concept should also work vertically if you wanted this kind of centering (and this is demonstrated in the example below). What you are centering in relation to obviously depends on what position value you are using - in the following example I'm going to use absolute so that it will either be relative to the nearest parent element with positioning (maybe a surrounding div with position: absolute) or to the body.
1
2
3
| <div id="main_content">
<!-- Some content here -->
</div>
|
1
2
3
4
5
6
7
8
9
10
| #main_content {
width: 380px; /* Division width */
height: 380px; /* Division height */
padding: 10px; /* 10px Padding */
position: absolute; /* Position in relation to the nearest positioned element */
top: 50%; /* 50% from the top */
left: 50%; /* 50% from the left */
margin-top: -200px; /* Push the division up by half our TOTAL height */
margin-left: -200px; /* Push the division left by half our TOTAL width */
}
|