In CSS, the text-align property is used to set the horizontal alignment of text within an HTML element. It can horizontally align the text to the left, center, or right within the element based on your requirement.
Originally, the text-align property is designed to align the text within the elements, but many times we use it for aligning(especially centering) several HTML elements such as buttons, images, spans, etc.
However, when we try to center elements or text with text-align: center;, sometimes it works sometimes not.
There could be a number of reasons why the text-align: center; is not working for you. The solution depends on what you are trying to achieve with it.
Let’s look at some common things that you might be doing wrong while applying the text-align: center; to an element:
Reasons Why the text-align center is Not Working
When you are applying text-align: center; to an element, the first thing you have to keep in mind is that it will align the element’s text(or content) to the center only if the element is a block-level element such as a div, paragraph, list, etc.
If the element is an inline element such as a span, button, image, link, etc. and you try to center their text or try to center align such elements with the text-align: center, it might not work.
So, when the text-align: center; is not working, you have to first look at the following possible things you might be doing wrong:
- You are applying text-align: center; to an inline element(button, image, link, etc.)
- You are trying to center align the text of a block-level element but the element doesn’t have enough width
- You are trying to center align a block level element with text-align: center;
- The element has a
floatproperty - The element has
position: fixed;orposition: absolute;
Most probably, you might be trying to center align an inline element (button, img, span, link, etc.) with text-align: center; property.
Let’s one by one look at the solutions to each problem listed above.
A Quick Solution to Fix the text-align center not Working Problem in CSS
As we discussed in the previous section, the text-align property aligns the text or content of only those HTML elements which are of type block such as a div, p, li, etc.
But if you try to apply the text-align: center; property to inline elements such as button, link, span, img, etc., it will not work.
So, to center align such elements using the text-align: center; property, you have to wrap them in a block-level element such as a div and then apply the text-align: center; on the wrapper (div) itself, not the inline element.
For example, if we want to center align a button, we have to first wrap it inside a div element and then apply the text-align: center; on the div itself.
<div>
<button>Center Aligned</button>
</div>
Now, apply the text-align: center; on the wrapper element(div here):
div{
text-align: center; /* Center content */
border: 2px solid coral;
padding: 20px 10px;
}
Sample Output:
After running the above code, you will get the following output:
As you can see from the above output, the button is pulled to the center of the div after applying text-align: center; on it.
If you tried the above solution and it worked for you, that’s great, if not, keep reading, we will provide you the solution for each individual problem you are facing.
Solution for the text-align center not Working on Span
Applying text-align: center; directly on a span element will not work because the <span> is an inline element.
Such elements do not start on a new line and take up only as much width as required to fit their content.
So, if you want to center align the text of a span element, you have to explicitly make it a block element by setting its display property to block and then apply the text-align: center; on it.
<span> This is some dummy text</span>
Add the CSS:
span{
display: block; /* Make block type */
text-align: center; /* Align text to center */
border: 2px solid crimson;
padding: 20px;
}
Sample Output:
As you can see from the above output, the text of the span is aligned to its center.
If you want to center align the whole span element to the center, not just text, you have to wrap it inside a block level element such as a div and then apply text-align: center; on the div itself.
<div>
<span> This is some dummy text</span>
</div>
Add the CSS:
div{
text-align: center; /* Center its Content */
padding: 20px;
border: 2px solid crimson;
}
span{
background-color: yellow;
}
Output:
Solution for text-align center not Working on Image
Just like the spans, images are also inline elements. Therefore, applying text-align: center; on images will not pull them to the center of their parent.
If you want to center align the images with the text-align: center; property, you have to wrap them in a block-level element such as a div and then apply text-align: center; on the div itself.
<div>
<img src="images/cat.jpg" width="200" height="200">
</div>
Add the CSS:
div{
text-align: center; /* Center its content */
border: 2px solid crimson;
padding: 20px;
}
Solution for the text-align center not Working on Buttons, Links, Inputs and Other Inline Elements
As the buttons, links, inputs, images, etc. are all inline-level HTML elements. Therefore if you try to center align such elements with the text-align: center; property, it won’t work.
To center align such elements with text-align: center;, you have to wrap them in any block-type element such as a div and then apply text-align: center; on the div itself. This will automatically pull the inline elements to the center of their parent.
<div>
<a href="#">This is a link</a>
<button>Click Me</button>
</div>
Add the CSS:
div{
text-align: center; /* Center its Content */
padding: 20px;
border: 2px solid crimson;
}
Output:
Solution for text-align center not Working on display flex
If the element on which you are applying text-align: center; is a flex container ie. you have set its display property to flex, the text-align: center; might not work.
In such cases, to center align the text(content) of such elements, you can instead use the justify-content property of the flexbox module.
The justify-content property is used to horizontally align the elements of a flex container. To align the items of such elements to the center, you can simply set the justify-content property to center.
<div>
This is some dummy text.
</div>
Add the CSS:
div{
display: flex; /* flex container */
justify-content: center; /* Horizontally center */
padding: 20px;
border: 2px solid crimson;
}
Output:
Solution for text-align center not Working With position absolute(or fixed)
If you set the position of an element to absolute or fixed and then try to center its text using the text-align: center;, it might not work.
This is because when you set an element’s position to absolute or fixed, it only takes as much width as required to fit its text.
So, if you want to center align the text of such elements with text-align: center;, you have to increase their width either by using the width property or using the left and right properties.
<div>
This is some dummy text.
</div>
Add the CSS:
div{
position: absolute;
width: 60%; /* Increase width */
text-align: center; /* Center text */
padding: 20px;
border: 2px solid crimson;
}
Output:
Conclusion
In this article, we learned why sometimes the text-align: center; property does not work and how we can fix it.
In summary, the main reason the text-align: center; is not working for you is probably that you are trying to apply it on an inline element such as a span, button, image, link, etc.
But the text-align property only works with block elements such as a div, paragraph, list, etc.
So, if you want to center align inline elements with the text-align property, you can wrap them inside a block element and apply text-align: center; on it.
However, there could also be several other reasons why the text-align: center; doesn’t work. We also discussed such possible reasons along with their solutions.
Thanks for reading.
