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

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中心的正确方法是什么？ 应该将“ O”放在父div的中心。

谢谢。

Answer 1

您应该添加display: flex; 到父级 （在您的情况下为.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>

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

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

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-05-21 17:03:35

解决方案2
0 2018-05-21 17:21:25

解决方案3
0 2018-12-22 12:21:01

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

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-05-21 17:03:35

解决方案2 0 2018-05-21 17:21:25

解决方案3 0 2018-12-22 12:21:01

解决方案1
0 已采纳 2018-05-21 17:03:35

解决方案2
0 2018-05-21 17:21:25

解决方案3
0 2018-12-22 12:21:01