无法使用CSS GRID将元素居中

Question

我正在使用css网格进行练习，并且我希望将某些元素的居中与justify-content：center中心，但是它不起作用，我对css网格是陌生的，我想了解该错误。

附加的图像，我想将元素居中在左栏中，其中一个包含首页图像，下面是文字

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陌生

Answer 1

.home span img{
   max-width:50%;
   display:block;
   margin:auto
}
.home span p{
  text-align:center
}

无法使用CSS GRID将元素居中

问题描述投票：0回答：1

1个回答

最新问题

无法使用CSS GRID将元素居中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1