How to center text in html?

Question

In short, I tried to center one <div> with text-align: center; for display: inline-block;, but nothing seems to happen. I tried to center it with justify-content: center; align-items: center; for display: inline-flex;, and again, nothing seems to happen. The only way to center them is I added text-align: center; to the <body>, but that will make the whole document center, while I want only that one <div> to be centered and the rest not centered.

Here is my code:

<DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="./reset.css">
    </head>
    <style>

    body {
        color: blue;
        background-color: rgb(40, 40, 40);
        /*text-align: center;*/
    }

    .head2 {
        font-size:20px;
        color: red;
        background-color: cyan;
        display: inline-block;
        text-align: center;
    }

    /*.head1 {
        font-size:20px;
        color: red;
        background-color: cyan;
        display: inline-block;
        text-align: center;
    }*/

    </style>
        <body>
            <p>some text</p>
            <div class="head1">
                <p class="head2">Some another text</P>
            </div>
        </body>
    </html>

I want to center only the cyan box. I'll be really thankful for any help.

score 1 · Accepted Answer · answered Apr 02 '21 at 09:05

Add text-align:center in .head1

<DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="./reset.css">
    </head>
    <style>

    body {
        color: blue;
        background-color: rgb(40, 40, 40);
        /*text-align: center;*/
    }

    .head2 {
        font-size:20px;
        color: red;
        background-color: cyan;
        display: inline-block;
        text-align: center;
    }

    /*.head1 {
        font-size:20px;
        color: red;
        background-color: cyan;
        display: inline-block;
        text-align: center;
    }*/
    
    .head1 {
       text-align:center;
    }

    </style>
        <body>
            <p>some text</p>
            <div class="head1">
                <p class="head2">Some another text</P>
            </div>
        </body>
    </html>

score -1 · Answer 2 · edited Apr 03 '21 at 05:36

<style>
body {
    color: blue;
    background-color: rgb(40, 40, 40);
    /*text-align: center;*/
}

.head2 {
    font-size:20px;
    color: red;
    background-color: cyan;
    text-align: center;
}

/*.head1 {
    font-size:20px;
    color: red;
    background-color: cyan;
    display: inline-block;
 
}*/

</style>
    <body>
        <p>some text</p>
        <div class="head1">
            <p class="head2">Some another text</P>
        </div>
    </body>
</html>

How to center text in html?

2 Answers2