Flex/CSS cannot align text in the center of the div

0
votes




    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>

Hello,very short question.

Just started to use Flex/CSS. Cannot solve a problem.

Why does Flex align-items:center and justify-content:center does not put the text in the center of the div. What is the proper way to put the text in the center of the parent div. It should have placed the "O" right into the center of the parent div.

Thank you.

3
htmlcssflexbox

3 Answers

0
votes

You should add display: flex; to the parent div. (.square in your case)

0
votes

a quick fix for 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";
}
0
votes

    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>

Just add display: flex in the .square class that'll row-wise center (default) your content, but if say you want to column-wise center you just need to do flex-direction: column; in the .square class.