When coding your webpage layout in HTML, you will often need to center elements inside or within another HTML element. If text align center not working, when: 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.
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. Text align center not working? 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 within 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. Text align center not working? There are mainly two different ways you can specify these CSS properties: inline or in an external file.
Text align center not working in div or span
Inline HTML code
You can use the style attribute of the div or span tag, where ever you are defining the tag in the HTML. Text align center not working? 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.
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:
In most cases, when working with text inside the div or span tags, 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. Text align center not working
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. Text align center not working? 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:
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.
Troubleshooting when text align center not working
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 inside div tag 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 to refresh the page bypassing the cache. You can also delete the cache explicitly. Maybe also try another browser if possible.
Parent Block Width/Alignment: Ensure that the parent block or div tag 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 or identify such issues by using a developer tool or by using temporary borders around the blocks.
Multiple Nested blocks: When there are several nested blocks (span and div), 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.