我是初学者，正在学习css。我有两个问题。
- 我想在图标框下方显示文本，但它位于图标框的右侧 每个图标。我在做什么错？
- 我正在使用 display flex,alignItem center, justify content in 3 类(主体、包装、元素)。看起来我在重复代码。你能推荐好的做法吗？
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;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="item">
<i class="icon material-icons">directions_bike</i>
<small class="text">Bicycle</small>
</div>
<div class="item">
<i class="icon material-icons">backup</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">email</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">airplanemode_active</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">insert_chart</i>
<small></small>
</div>
</div>
</body>
</html>最佳答案
我建议将 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;
}
这是一个代码笔:https://codepen.io/josh_minkler/pen/wvvZYeM
CSS 技巧对 flexbox 有很好的指导 here
关于html - 如何在图标框下方显示文字？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59004173/