Flex / CSS не может выровнять текст в центре div - PullRequest
Новая
       6

Flex / CSS не может выровнять текст в центре div

0 голосов
/ 21 мая 2018 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    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 выровняет элементы: center и justify-content: center, а текст не помещается в центр div.Как правильно разместить текст в центре родительского div.Он должен был поместить букву «О» прямо в центр родительского div.

Спасибо.

Ответы [ 3 ]

0 голосов
/ 21 мая 2018

быстрое решение для 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 голосов
/ 22 декабря 2018 

    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, который будет центрировать (по умолчанию) ваш контент, но если, скажем, вы хотите столбец-мудрый центр вам просто нужно сделать flex-direction: column; в классе .square.

0 голосов
/ 21 мая 2018

Вы должны добавить display: flex; к родительскому div.(.square в вашем случае)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...