css - 尝试在 CSS 中将 "figure"标记居中(不使用 Div)

Question

我目前是第一次尝试创建一个网站，我很难让我的 3 个内联 block 图像在 CSS 中正确居中。

我使用 figure 标签来为我的图像添加标题和显示(效果很好，没问题)。

但是当我回过头来将 3 张图片水平内嵌放置时，尽管我尽了最大努力，但它们不会从屏幕左侧移动。

figure {
    text-align: center; 
    font-family: 'Rasa', serif;
    font-size: 18px; 
    display: inline-block;
    align-content: center;
    max-width: 700px;
    margin: auto;
    float: center;
}

如果能帮助指出我做错了什么或遗漏了什么，我将不胜感激。

Answer 1

这就是你想要做的吗？

HTML:
<div class="figure">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:
.figure {
    text-align: center; 
    font-family: 'Rasa', serif;
    font-size: 18px; 
    display: inline-block;
    align-content: center;
    max-width: 700px;
    margin: auto;
    float: left;
}
.box{
  height:30px;
  width:30px;
  border:1px solid black;
  float:left;
}