如何在多张图片上方添加并居中对齐标题？

先修正原代码中的标签错误，并添加对应需求的标题，以下是修改后的完整代码：

<div class="body">
    <div class="intro">
        <h1>Main.</h1>
        <h3>type something</h3> <!-- 修正标签闭合错误 -->
        <section class="buttonone">
            <button>Sign up</button>
        </section>  
    </div>
    <!-- 添加容器标题，匹配需求图的标题区域 -->
    <h2>Featured Foods</h2>
    <section class="container">
        <figure>
            <div class="random"><img src="drink.jpg" alt="lemonade"></div> <!-- 补充图片alt文本 -->
            <figcaption>lemonade</figcaption>
        </figure>
        <figure>
            <div class="random"><img src="toro.jpg" alt="omakasa-Toro sushi"></div>
            <figcaption>omakasa-Toro sushi</figcaption>
        </figure>
        <figure>
            <div class="random"><img src="noodle.jpg" alt="ramen"></div> <!-- 修正拼写错误ramei→ramen -->
            <figcaption>ramen</figcaption>
        </figure>
        <figure>
            <div class="random"><img src="oyster.jpg" alt="oyster sushi"></div>
            <figcaption>oyster sushi</figcaption>
        </figure>
    </section>
</div>

关键调整内容： #

• 修复了<h3>type something</h2>的标签闭合错误，改为正确的</h3>
• 在container区块上方添加了标题<h2>Featured Foods</h2>，可根据需求修改标题文本
• 补充了图片的alt属性文本，提升页面可访问性
• 修正了figcaption里的拼写错误ramei为ramen

内容的提问来源于stack exchange，提问作者Birddd