html - 如何使用图像底部带有无花果标题的内联 block 来订购我的图标

Question

我想将我的技能图标排列在一个内联 block 中，并在每个图像的底部对每个技能进行描述

我曾尝试对容器元素使用 flex-box，然后对 skill-icon 标签使用 display:inline-block，但它们似乎仍然保持对齐。我希望它们甚至在一个内联 block 中彼此重叠

/* Skills section & Skill Icons */
    
.skill-container  {

}

.skill-icon {
  display: flex;
  flex-direction: column;
}

<section class="skill-container">
    <h1>What do I use ?</h1>
    <p>I have experience with the following Languages, Frameworks & Libraries</p>
    <!--Tech Icons-->
    <div id="skills-icons">

        <div class="skill-icon">
            <img  src='/Images/icons8-html-5.svg' height="20%" width="20%">
            <figcaption>Bootstrap</figcaption>
        </div>

        <div class="skill-icon">
            <img  src='/Images/icons8-css3.svg' height="20%" width="20%">
            <figcaption>CSS3</figcaption>
        </div>

        <div class="skill-icon">
            <img  src='/Images/icons8-javascript.svg' height="20%" width="20%">
            <figcaption>Javascript</figcaption>
        </div>

        <div class="skill-icon">
            <img  src='/Images/icons8-jquery.svg' height="20%" width="20%">
            <figcaption>Jquery</figcaption>
        </div>

        <div class="skill-icon">
            <img  src='/Images/icons8-git.svg' height="20%" width="20%">
            <figcaption>Git</figcaption>
        </div>

        <p>Currently improving ReactJS</p>
    </div>
</section>

上面是我尝试完成的 CSS 类，图像保持相互对齐，而不是像我想要的那样并排 please see the image as this is exactly what I am trying to achieve

我希望我的图片通过 display: inline-block 元素相互叠加

Answer 1

确保使用 <figcaption>标签内 <figure>正确语义的标记。更多详情 here

请检查以下符合您期望的实现。

/* Skills section & Skill Icons */
    
.skill-icon {
  display: inline-flex;
  flex-direction: column;
  
  
  
  /* only for example styling */
  border: 1px solid #dedede;
  padding: 10px;
  text-align: center;
}

<section class="skill-container">
    <h1>What do I use ?</h1>
    <p>I have experience with the following Languages, Frameworks & Libraries</p>
    <!--Tech Icons-->
    <div id="skills-icons">

        <figure class="skill-icon">
            <img src='https://pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d.png?w=70' />
            <figcaption>JavaScript</figcaption>
        </figure>

        <p>Currently improving ReactJS</p>
    </div>
</section>

如果你打算使用display: flex;也没关系或 display: inline-flex在这种情况下。