外贸社区 - 交流学习，提升技能，获取成功经验

#community .container .menu { display: flex; gap: 24px; }

    #community .container .menu .box {
        cursor: pointer;
        flex: 1;
        display: grid;
        place-content: center;
        border-radius: 10px;
        height: 72px;
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    }

    #community .container .menu .box .img {
        height: 36px;
    }

    #community .container .menu .box .title {
        font-size: 16px;
        font-weight: 600;
    }

    #community .container .menu .box .detail {
        font-size: 12px;
        color: #666666;
    }怎么让img和title、detail在同一行，title和detail换行，这三个整体居中内容：可以使用flex布局来实现img和title、detail在同一行，title和detail换行，并将它们整体居中。

首先，给.menu的父容器.container添加以下样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

然后，给.box添加flex布局和样式：

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

最后，将.img的高度调整为适当的大小：

.img {
  height: 24px;
}

这样，img和title、detail就会在同一行显示，title和detail会换行，并且整体居中显示。