如何将 html 中的文本居中？

Question

简而言之，我试图将 <div> 与 text-align: center; 居中，以获得 display: inline-block;，但似乎没有任何反应。我试着用 justify-content: center; align-items: center; 和 display: inline-flex; 将它居中，但似乎什么也没有发生。使它们居中的唯一方法是我将 text-align: center; 添加到 <body>，但这将使整个文档居中，而我只希望那个 <div> 居中而其余的不居中.

这是我的代码：

<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>

我只想让青色框居中。非常感谢您的帮助。

Answer 1

在.head1

中添加text-align:center

<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>

Answer 2

<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>

如何将 html 中的文本居中？

How to center text in html?

html

css

center