Не удалось центрировать элементы с CSS GRID - PullRequest
Новая
       104

Не удалось центрировать элементы с CSS GRID

0 голосов
/ 28 февраля 2020

Я практикуюсь с сеткой css и хочу центрировать некоторые элементы с помощью justify-content: center, но это не работает, я новичок в сетке css и хочу понять ошибку.

Прикрепленное изображение, я хочу центрировать элемент внутри левой панели, тот, на котором изображен дом и текст ниже

I

CSS КОД: 

/* Container principal */
.container {
    font-family: Arial;
    max-height: 80vh;
    display: grid;
    grid-template-columns: 100px  1fr;
    grid-template-rows: 70px minmax(300px ,85vh);
    grid-template-areas: "navbar navbar"
                        "leftbar subcontainer"
                        "leftbar subcontainer";
}
/* BARRA IZQUIERDA COLORES */
.leftbar{
background: pink;
grid-area: leftbar;

}
/* COntainer de la barra lateral izquierda */
.containerleftbar{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 150px);
    justify-items: center;
    align-content: initial;
}
.home span img {
    max-width: 50%;
}

HTML КОД: 

<body>
    <div class="container">
        <div class="item leftbar">
            <div class="containerleftbar">
                <div class="home item-1">
                    <span>
                        <img src="hom2.png" alt="homeimg">
                        <p>Home</p>
                    </span>
                </div>
                <div class="trending item-2">
                    <span>
                        <p>Trending</p>
                    </span>
                </div>
                <div class="likes item-1">
                    <span>
                        <p>Likes</p>
                    </span>
                </div>
            </div>
        </div>
        <div class="item navbar" >
            <div class="containernavbar">
                NAVBAR
            </div>
        </div>
        <div class="item subcontainer">
            <div class="containerx2">
                CONTAINER
            </div>
        </div>
    </div>
</body>

При размещении изображения дома текст больше не в центре, но я не знаю, почему это так, это может быть очень сомнительное, но я новичок в css

...