我成功地用一些图像创建了一个FlexBox，看起来不错。然后我把图像做成了图形，因为我需要给图像添加标题，引入了我无法摆脱的空白。
下面是一个到codepen的链接：https://codepen.io/dawsboss888/pen/qBybXEJ
超文本：
<html>
<head>
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="container">
<div class="ballon">
<figure>
<img src="https://cdn-icons-png.flaticon.com/512/250/250618.png">
<figcaption>2009</figcaption>
</figure>
<figure>
<img src="https://cdn-icons-png.flaticon.com/512/250/250618.png">
<figcaption>2011</figcaption>
</figure>
</div>CSS：
.container {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 25px;
}
figcaption {
font-size: 10px;
text-align: center
}
.ballon {
display: flex;
flex-flow: row wrap;
max-width: 450px;
}
1条答案
按热度按时间gojuced71#
至少在chrome浏览器上，figure元素似乎有一些默认的边距定义：
如果这些边距就是你所说的“空白”，那么你可以通过在css文件中添加边距定义来消除它们，如下所示：