如何水平显示图像及其标题

Question

页面末尾的最后四张图片，我想将它们水平显示。 如果没有标题，可以使用 display:flex 属性水平显示图像，但是当我添加标题时，图像将垂直显示。 抱歉，代码太长了，但最后四张图片是我需要修复的。

 body { margin: 0; box-sizing: border-box; }.header { background-color: #696969; padding-top: 2rem; /* padding-top and margin (in body tag) were used to eliminate the white spaces around the background color */ padding-bottom: 1rem; text-align: center; }.profile-image { height: 8rem; width: 8rem; border-radius: 20rem; border: 0.3rem solid white; transition: transform 1s; }.profile-image:hover { transform: rotate(360deg); transition: transform 1s; }.header-links { padding-top: 2rem; }.header-links a { color: white; text-decoration: none; padding: 1.9rem; text-transform: uppercase; font-family: 'Bebas Neue', cursive; font-size: 2rem; }.header-links a:hover { color: orange; }.name-title { color: white; font-family: 'Lexend Zetta', sans-serif; }.wallpaper { width: 100%; } main { background-color: azure; margin-left: 1rem; }.about { border-left: 0.2rem solid red; border-right: 0.2rem solid red; border-radius: 0.4rem; padding: 0 0.3rem; display: inline; /* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */ text-transform: uppercase; font-family: 'Bebas Neue', cursive; font-size: 2rem; letter-spacing: 0.2rem; }.projects { border-left: 0.2rem solid red; border-right: 0.2rem solid red; border-radius: 0.4rem; padding: 0 0.3rem; display: inline; /* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */ text-transform: uppercase; font-family: 'Bebas Neue', cursive; font-size: 2rem; letter-spacing: 0.2rem; display: flex; justify-content: center; }.margin-top { margin-top: 8rem; }.align-center { justify-content: space-evenly; /*justify-content: space-evenly and display-flex were added to center everything and stop skill elements from overlapping. It was originally text-align: center - although it centered everything, skill elements overlapped */ display: flex; }.align-center-1 ul { /* a new align-center-1 was created just for the purpose of adjusting margin-right */ justify-content: space-evenly; display: flex; margin-right: 4rem; }.boxes img { height: 14rem; width: 14rem; border: 2px solid red; }.boxes { justify-content: space-evenly; display: flex; margin: 1rem; }.center { text-align: center; }

 <section> <header> <div class="header"> <figure class="name-title"> <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile photo"> <figcaption> <h1>John Johnson</h1> <h2>Front End Developer</h2> </figcaption> </figure> <div class="header-links"> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="contact">Contact</a> </div> </div> </header> </section> <section> <img class="wallpaper" src="https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="mountains"> </section> <section> <main> <div class="align-center"> <h1 id="about" class="about">About</h1> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p> <div class="align-center"> <h2>Skills</h2> </div> <div class="align-center-1"> <ul> <li>HTML & CSS</li> <li>Javascript</li> <li>React</li> </ul> </div> <section> <div class="margin-top"> </div> <div class="align-center"> <h1 id="projects" class="projects">Projects</h1> </div> <div class="boxes"> <figure> <img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw"> <figcaption class="center">Winter</figcaption> <img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg"> <figcaption class="center">Summer</figcaption> <img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg"> <figcaption class="center">Spring</figcaption> <img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg"> <figcaption class="center">Fall</figcaption> </figure> </div> </main>

Answer 1

我认为最好用单独的<figure>标签包装<img>和<figcaption> 。 它还解决了您的问题，无需任何 CSS 更改。

更新了 Html 代码块

<div class="boxes">
    <figure>
      <img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw">
      <figcaption class="center">Winter</figcaption>
    </figure>
    <figure>
      <img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg">
      <figcaption class="center">Summer</figcaption>
    </figure>
    <figure>
      <img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg">
      <figcaption class="center">Spring</figcaption>
    </figure>
    <figure>
      <img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg">
      <figcaption class="center">Fall</figcaption>
    </figure>
  </div>

尝试这个。 我希望这是您想要的 output。

最终 output 剪辑

Answer 2

尝试将每个<img>和<figcaption>元素包装在另一个元素中（例如<div> ），并为父元素（此处为<figure> ）提供display: flex; 风格。

Answer 3

来自 MDN - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

通过在<figcaption>内部插入一个标题（作为第一个或最后一个子元素），可以将标题与<figure>元素相关联。 图中的第一个<figcaption>元素显示为图的标题。

这意味着每个<figure>最多应该有一个<figcaption> > 。 所以每个<img>和<figcaption>应该在一个单独的<figure>中。