Question



    html{
        margin: 0px;
        padding: 0px;
    }

    body{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #board {
        display: flex;
        flex-direction: column;
        height: 600px;
        width: 600px;
        justify-content: stretch;
        align-items: stretch;
    }

    #board .row{
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
        flex: 1;
    }

    .square {
        background-color: red;
        border: white solid 1px;
        flex: 1;
        justify-content: center;
        align-items: center;
    }

    #board .row .square:hover{
        background-color: yellow;
    }


    .square:hover:before
    {
       content: "O";
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="board">

            <div class = "row" >
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

            <div class = "row" >
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

            <div class = "row">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

       </div>
    </body>
    </html>

您好，非常简短的问题。

刚开始使用Flex / CSS。无法解决问题。

为什么Flex align-items：center和justify-content：center不会将文本放在div的中心。将文本放在父div的中心的正确方法是什么。它应该放置＆＃34; O＆＃34;直接进入父div的中心。

谢谢。

Answer 1

您应该将display: flex;添加到父div。（在你的情况下.square）

Answer 2

快速修复css：

html{
    margin: 0px;
    padding: 0px;
}

body{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#board {      

    display: flex;
    justify-content: stretch;
    flex-direction: column;
    height: 600px;
    width: 600px;
    align-items: stretch;
}

#board .row{
    display: flex;
    flex: 1;
}

.square {
    background-color: red;
    border: white solid 1px;
    flex: 1;   
    display: flex;
    justify-content: center;
    align-items: center;
}

#board .row .square:hover{
    background-color: yellow;
}

.row .square:hover:before
{
  content: "O";
}

Answer 3

    html{
        margin: 0px;
        padding: 0px;
    }

    body{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #board {
        display: flex;
        flex-direction: column;
        height: 600px;
        width: 600px;
        justify-content: stretch;
        align-items: stretch;
    }

    #board .row{
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
        flex: 1;
    }

    .square {
        /* just add this line */
        display: flex;
        background-color: red;
        border: white solid 1px;
        flex: 1;
        justify-content: center;
        align-items: center;
    }

    #board .row .square:hover{
        background-color: yellow;
    }


    .square:hover:before
    {
       content: "O";
       
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="board">

            <div class = "row" >
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

            <div class = "row" >
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

            <div class = "row">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>

       </div>
    </body>
    </html>

只需在display: flex类中添加.square，即可将内容按行居中（默认），但是如果说要按列居中，则只需执行{{1} } flex-direction: column;类中。

Flex / CSS无法在div的中心对齐文本

3 个答案: