堆栈内存溢出
  简体   繁体   English

如何使用图像底部带有 figcaption 的内联块来订购我的图标

[英]How do I order my icons with a inline-block with the figcaption at the bottom of the images

 原文  2019-10-23 04:04:45  2   6    html/ css

问题描述

I would like to arrange my skill icons in an inline-block with the description of each skill at the bottom of each image我想将我的技能图标排列在一个内联块中，每个图像底部都有每个技能的描述

I have tried using flex-box for the container element then using display:inline-block for the skill-icon tag but they still seem to stay aligned.我尝试使用 flex-box 作为容器元素，然后使用 display:inline-block 作为技能图标标签，但它们似乎仍然保持对齐。 I want them on top of each other even and within an inline-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>

Above is the CSS classes that I have tried to complete this with the images keep aligning on top of each other and not side by side like I want please see the image as this is exactly what I am trying to achieve上面是 CSS 类，我试图通过图像保持相互对齐而不是像我想要的那样并排来完成这个，请查看图像，因为这正是我想要实现的

I would like my images to be on top of each other with a display: inline-block element我希望我的图像彼此重叠并显示：inline-block element

6 个解决方案

解决方案1
 0  2019-10-23 04:15:07

Make sure you use <figcaption> tag inside <figure> tag for correct semantics.确保在<figure> figure> 标记内使用<figcaption>标记以获得正确的语义。 More details here更多细节在这里

Please check out the implementation below which meets your expectations.请查看以下符合您期望的实现。 

 /* 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>

It doesn't matter if you are going to use display: flex;是否要使用display: flex;没关系or display: inline-flex in this case.或display: inline-flex在这种情况下。

解决方案2
 0  2019-10-23 04:29:52

display flex with fixed height should wrap your skills accordingly.具有固定高度的 display flex 应该相应地包裹您的技能。 If you want a dynamic height then remove flex direction column.如果您想要动态高度，请删除 flex 方向列。 

 #skills-icons{ display: flex; flex-wrap: wrap; flex-direction:column; height:200px; align-items:center; }.skill-icon{ 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"> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Bootstrap</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>CSS3</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Javascript</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Jquery</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png?w=70'> <figcaption>Git</figcaption> </div> </div> <p>Currently improving ReactJS</p> </section>

解决方案3
 0  2019-10-23 04:30:32

Try below code with updated CSS -使用更新的 CSS 尝试以下代码 - 

 /* Skills section & Skill Icons */ #skills-icon { display: block; }.skill-icon{ display: table-cell; text-align: center; } figcaption{ text-align: center; }
 <section class="skill-container"> <div id="skills-icons"> <div class="skill-icon"> <img src='https://img.icons8.com/clouds/2x/google-logo.png' width="40%"> <br /> Bootstrap </div> <div class="skill-icon"> <img src='https://img.icons8.com/clouds/2x/google-logo.png' width="40%"> <br /> CSS3 </div> <div class="skill-icon"> <img src='https://img.icons8.com/clouds/2x/google-logo.png' width="40%"> <br /> Javascript </div> <div class="skill-icon"> <img src='https://img.icons8.com/clouds/2x/google-logo.png' width="40%"> <br /> Jquery </div> <div class="skill-icon"> <img src='https://img.icons8.com/clouds/2x/google-logo.png' width="40%"> <br /> Git </div> </div> </section>

解决方案4
 0  2019-10-23 04:42:40

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>In Snippet it won't show but this will work for you.</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <section>
        <div class="row p-2">
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
        </div>
        <div class="row p-2">
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
            <div class="col d-sm-flex justify-content-xl-center">
                <figure class="figure"><img class="img-fluid figure-img mt-1" style="width: 85px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png">
                    <figcaption class="figure-caption d-sm-flex justify-content-sm-center">HTML</figcaption>
                </figure>
            </div>
        </div>
    </section>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

解决方案5
 0  2019-10-23 05:07:41

在此处输入图像描述

Check Out the result in this image查看此图像中的结果

解决方案6
 0  2019-10-23 17:14:23

 #skills-icons{ display: flex; flex-wrap: wrap; flex-direction:column; height:200px; align-items:center; }.skill-icon{ 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"> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Bootstrap</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>CSS3</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Javascript</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png:w=70'> <figcaption>Jquery</figcaption> </div> <div class="skill-icon"> <img src='https.//pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d?png?w=70'> <figcaption>Git</figcaption> </div> </div> <p>Currently improving ReactJS</p> </section>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在嵌入式块中将图像与文本对齐？ - How can I align my images with text in an inline-block? 如何将内嵌块图标与标签对齐？ - How to align inline-block icons with labels? 如何使用内联块在列表中制作响应式图像 - how to do a Responsive images in a list with inline-block 如何重新排列CSS中内联块的顺序？ - How would I rearrange the order on an inline-block in CSS? 如何将inline-block元素的底部设置在block元素的底部 - how to set bottom of inline-block element at the bottom of block element 如何防止我的图像溢出内联块容器 - How do I keep my image from overflowing an inline-block container 如何从内联块元素中删除此白色背景 - How do I remove this white background from my inline-block element 如何使内联块表扩展到100％的宽度？ - How do I make my inline-block table expand to 100% width? 如何在 CSS 的内联块中移动文本？ - How do I shift text over in an inline-block in CSS? 如何将可变宽度的内联块元素居中？ - How do I center an inline-block element of variable width?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM