When coding your layout in HTML, you will often need to center elements inside or with in another HTML element. Centering a text (or any element) means horizontally aligning the piece of content in the center of the parent tag. Quite often, it will be text that needs to centered but it can be an image or any other visual content.
The CSS text-align property of the tag specifies the horizontal alignment of its child elements. There are several different values that you can use with the text-align property: left, right, center, justify, initial and inherit. It should be obvious from these values that you can specify center as the value to align the element in the center (or middle).
Almost any visual element can be centered with in a block or any layout tag. The common and usual parent tags that you are likely to encounter are div, span, p etc. The text-align property can be used with any of these tags. There are mainly two different ways you can specify these CSS property: inline or in external file.
Center Text Element
Inline HTML code
You can use the style attribute of the tag, where ever you are defining the tag in the HTML. So, if you have a div element with text inside such as the example below then you can specify the text align property as in the example below.
<div style="text-align:center">This is my example text that will be centered<div>
The above example will display as shown below. I have added a blue border to make the parent element visible and recognizable.
You can also specify these properties in an external CSS file, as you should and is the recommended approach. You can create a named rule and then use it repeatedly through out your code. In this example, we create a rule or class called mycenter
In the CSS File:
In HTML Page:
<div class="mycenter">This is my example text that will be centered<div>
Centering the Block or Image Element
In most cases, when working with text the above CSS property is enough to achieve what you want. In some other scenarios, especially when there is a child block tag involved and you want to horizontally center the entire block thus ensuring that both the left and right margins are equal, you will need to specify the margin as well.
In CSS file:
Depending on how the blocks are nested and your desired layout, you might need to specify margins in the child block as well. Below is an example, where the styles are defined in-line for easy reference but you could port them into a CSS file as well.
In HTML Page:
<div style="width: 100%; text-align: center; ">
<div style="width: 10em; text-align: center; margin: 5px auto;">An example test paragraph goes here</div>
<div style="width: 50%; text-align: center; margin: 5px auto;">Another example test paragraph goes here. Paragraph # 2</div>
<div style="width: 6em; text-align: center; margin: 5px auto;">Yet another piece of content</div>
The above example shows how you can center three different child block elements of different or varying widths.
If you are working with older versions of code, then you might have seen the center tag that are widely used to achieve the same (or similar) functionality. The center tag has been deprecated since HTML 4 and not supported in HTML 5, so you will need to update those to CSS.
As your layout become complex with different nested tags and block elements, sometimes it can get quite frustrating to figure why the text or block is not getting centered even after you have specified it….here are some usual mistakes and troubleshooting tips.
Cached Pages: This is more common than you realize. The browser may be caching the page or the css file. Make sure that refresh the page bypassing the cache or after deleting the cache explicitly. Maybe also try another browser if possible.
Parent Block Width/Alignment: Ensure that the parent black has the intended width. The child elements are rendered with respect to the parent width, and sometimes the parent may not span the entire width and even with the centered alignment would visually look left oriented, as the entire parent block is aligned to the left. You can debug using a developer tool or by using temporary borders around the blocks.
Multiple Nested blocks: When there are several nested blocks, it can be quite difficult to know all the inherited rules for a block. See if there are any properties from the parent or ancestor tag that are getting inherited all the down to your block or tag.
Overlapping CSS Rules: When specifying CSS rules, especially in an external file it is quite easy to have classes which has the same properties with different values. Make sure that your tag is not using multiple classes where one property is getting overridden by a different value from another class.
Spaces and Tabs in CSS Rules: Most of the time, the spaces or blanks are properly handled. Some browsers do have issues with blanks especially in the beginning of the class names or rules. This can cause the rules to be not executed at all, especially if you are using style tags with in the HTML.
Well, using a developer tool to inspect your page layout is a definite must if you are stuck. It is available in most browsers such as Chrome or Firefox.