Question

我是初学者，正在学习CSS。我有两个问题。

我想在图标框下方显示文本，但该文本位于每个图标。我在做什么错？
我正在使用display flex，alignItem center，在3中对齐内容类（body，wrapper，item）。看起来我在重复代码。你能建议好的做法吗？

Type[]

body {
	display: flex;
	align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item {
    width: 80px;
    height: 80px;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    border-radius: 3px;
}

.item:hover {
    background-color: #F0F1F7;
    transform: scale(1.3);
}

.icon {
    padding: 10px;
    border-radius: 50%;
    background-color: rgb(105, 204, 211);
    color: white;
}
.text{
    padding-top:10px;
    display: inline-flex;
    vertical-align: middle;
}

Answer 1

我建议将flex-direction: column;添加到您的.item类中。

.item {
    width: 80px;
    height: 80px;
    margin: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    border-radius: 3px;
}

这是一个codepen：https://codepen.io/josh_minkler/pen/wvvZYeM

CSS技巧对flexbox here很有帮助

如何在图标框下方显示文本？

1 个答案: