How to center text in CSS – The Complete Beginner’s Guide

5 Scenarios to center align text

1. When Website is in a development stage then there is usually a tendency to display an Under construction Page. Most of the text is center aligned in big letters.
2. When a new page is created, sometimes the header of the page needs to be displayed in the right center.
3. Some web pages display a pop up that displays after scrolling the webpage & it is displayed in the center of the page with the content also center aligned.
4. There may be a block of intro code that displays the image & the text center aligned & on clicking the user navigates to the main content page.
5. There is a table within a web page & the header columns have to be center aligned.

Doing center text in CSS the right way

While applying CSS to the web page the developer should have accurate information about applying the correct CSS properties that will bring the desired results.

When correct styles are not applied then it results in disturbing the design of the complete web page. When one thing goes wrong it may result in everything gone wrong.

Some CSS when applied incorrectly dis-aligns the rest of the elements on the web page & it becomes difficult later to identify the cause of the dis-alignment.

In some cases the design looks properly in one device but the page design is disturbed in the other size of device. This is related to the responsiveness of the website.

There are CSS properties that are supported in one browser but fail to render in another browser. The users of the website access your website from various different browsers & devices.

Multiple ways are available to center the text & you need to choose the correct one that matches your requirement by applying the right CSS to right elements on the web page.

Practical Code to Center text in CSS

So How do you Center text using CSS? It is quite simple to implement.

We can use text-align property with value center to make the text centered. You can use the property in 2 ways through Inline styling or from within Internal CSS

Inline Style :-

    <div style="text-align: center;">
        I am Centered
    </div>
        

Internal CSS :-

    <style>
        div {
            text-align: center;
        }
    </style>
        

HTML :-

    <div style="border: solid 3px blue; font-size: 30pt; background-color: #f5f5f5; height: 200px;">
        I am Centered
    </div>
            

Result :-

Text-Align property to center align text

The text-align property is used to center align the text within an element. The text will be horizontally aligned & text will be accurately centered without doing anything extra. Just applying the center value to the text-align property will make the text centered.

The text-align property has other values to shift the text to other positions. By default the text is left aligned in an element. To make the text centered or right aligned in CSS we have to do the work of applying the style to the element containing the text.

The text can be aligned with the help of 4 mostly used values as per the requirement of the web designer. The 4 mostly used values are left, center, right & justified. You can set any one value to text-align property.

There are more values that we can set to this property.

We can assign Text-align property to following values to determine the alignment of the text.

Property & Values in CSS

In CSS, We can set a value to Properties & the html element is displayed based on the value that is set to the particular property. There comes a need most of the time while designing Web pages to make use of Text-align property & it is very much easy to use this property. It works smoothly & we can implement it easily.

Some CSS frameworks have built in classes to align the text to the center. Designers just need to use the provided class that aligns the text with super ease. If you are not using any CSS framework like bootstrap then you can simply create a class within your style sheet & use the same class where needed for aligning the text.

There may come a question of whether the aligning the text centered will work correctly in the smaller devices like mobile phones. So the answer is aligning the text will work in a similar way in the mobile browsers. In fact we also have a control over CSS to align the text in different formats in mobiles & to display the text in different formats in web browsers through Media queries.

The inline style is a quick way to align the text centered. We can apply Text-align property directly to the elements like div, table & heading tags. In case of tables, we can also apply it to the td tags within the table. Text-align property will not work by default in case of span tags. Span tag has limited width & it does not occupy the complete horizontal row. It also occupies the width that the text contains. If you want to use the text-align property in the span tag then you will have to set the display property of span to inline-block. This will spread the element to the complete horizontal row & will align the text centered.

How do I center my header in CSS?

Headers are the doorway to the main content. Displaying the headers right in the center attracts the attention of the user & makes them dive into your content.

The headers are usually displayed on the screen with the help of header html tags like h1, h2, h3 & so on. There can be multiple headers on a given web page.

When Header tags are used then the text is displayed in a greater predefined font size with bolder style. Top & bottom margins are automatically applied so that the header can look unique than the rest of content.

When you put a header in the html document then by default it will be rendered to the left of the screen.

CSS :-

    <style>
        .centerHeaders {
            text-align: center;
        }
    </style>
            

HTML :-

    <h1 class="centerHeaders">I am Header no 1</h1>
    <h2 class="centerHeaders">I am Header no 2</h2>
    <h3 class="centerHeaders">I am Header no 3</h3>
    <h4 class="centerHeaders">I am Header no 4</h4>
    <h5 class="centerHeaders">I am Header no 5</h5>
    <h6 class="centerHeaders">I am Header no 6</h6>
            

Result :-

How do you center a div in the middle of the page?

In some temporary pages like under construction or count down tracker the content is displayed right in the center of the page.

The content is usually less for these kinds of pages & the message is displayed in a bigger font size so that visitors can straight away understand the message.

The html element can be centered in the middle of the page by using position & translate properties.

Setting the Position as fixed will keep the div unmoved even if you scroll the page the div will remain centered. Then the top & left are set to 50% to bring the div to the center of the screen.

Just applying above properties will not be accurate to middle align the div.

So finally we have to use the translate property. Setting this property to -50%, – 50% will move the div up by 50% of the height of the div to make the div vertically centered. Simultaneously translate will move the div to the right by 50% to make the div horizontally centered.

CSS :-

    <style>
        .centerDiv {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: solid 1px red;
        }
    </style>
            

HTML :-

    <div class="centerDiv">
        I am right in the middle of the page.
    </div>
            

Result :-

How do i vertically center align an image in the middle of a div?

Positioning the images in the center can be sometimes a struggling task & you might get irritated to meet the ends.

You might try to get the image in the right position but the image looks stubborn & rejects to be still & in the correct position.

Aligning the images in the middle of the div can be useful while designing slide show images or list of the introduction of the articles.

CSS :-

    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            border: solid 1px red;
        }

        img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
            

HTML :-

    <div class="container">
        <img class="image" src="https://i.pinimg.com/originals/85/65/50/856550aa773911d00b76b24aaa4bc467.png" width="100" />
    </div>
            

Result :-

How do you center a button?

While creating a form in your web application, the button looks good when it is center aligned.

The form elements on the left hand side & the header & the button to submit or close the page in the center is the mostly used design format for the forms.

Designing can never be restricted or limited to any particular pattern but some design patterns look great in a particular, as pattern mentioned in the above point.

To center align the button, we add the button element within a div & then use the text-align property to center.

CSS :-

    <style>
        div {
            text-align: center;
            border: solid 1px red;
        }
    </style>
            

HTML :-

    <div>
        <button>Submit</button>
    </div>
            

Result :-

CSS

As we have seen the practical demonstration on how to center text in CSS by using text-align property, now let’s hear a few words about the beauty of the CSS.

Here is little bit about CSS :-

• CSS stands for Cascading Style Sheets. It is nothing but a physical file that is stored in a location within your web application.
• CSS plays a great role in separation of the styling of the webpage from the content. This makes the code clean & clear.
• Code becomes highly manageable & quality of the code increases.
• Separation of presentation gives more command to control the design of web sites from a central location.
• It gives a Theming mechanism that we can implement with ease. Themes of the website can be stored in a separate CSS file.

Conclusion

We hope that you have learnt How to center text in CSS by reading this article. We have tried to keep things simple & easy to understand because there is beauty in simplicity.

Applying CSS is indeed a fun thing to do & there are less complexities when you learn to use CSS. By advancement of technology & new frameworks we can use pre-built frameworks like Bootstrap, Material Design for Bootstrap to make the web designing life easy.

Pre build frameworks provides all the tools & built in classes to handle all the responsive scenarios. We just need to learn what & where to use.

In modern days, web designing has become easier because of the advancements in the framework. We can even buy website templates at very cheap rates.

The days of struggling to keep the web site design consistent over all devices have vanished.

Happy Web Designing 🙂