通过css和html加工带有图片的figcaption_Css

通过css和html加工带有图片的figcaption

css

通过css和html加工带有图片的figcaption,css,Css,在这些代码中，我试图为每张图片写一个标题。除第一张图片及其标题外，pic 2和pic 3的标题不符合其css代码。如果你能告诉我我的错误，我真的很感激 HTML代码： <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="design.css" media="all"> <meta charset="UTF-8"> <title>First w

在这些代码中，我试图为每张图片写一个标题。除第一张图片及其标题外，pic 2和pic 3的标题不符合其css代码。如果你能告诉我我的错误，我真的很感激

HTML代码：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design.css" media="all">
  <meta charset="UTF-8">
  <title>First website</title>
</head>
<body>
  <header>
  <div id="main-menu">
   <a href="#Markup languages and scripting"> M&S </a>
   <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
   <span id="dropbtn">
    <button id="clickable-button">U&C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
   </span>
   <a href="aboutUs.html"> About us </a>
  </div>
  </header>
  <section>
    <div id="text-aboutUs">
      <p>In this page, you can find some information regarding to each member of this group. This information includes their personal interests, hobbies and some other intriguing information about the selected person. In order to access the information you just need to click on your intended person.</p> 
      <figure>
       <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption> Jack Ferreni</figcaption>
      </figure>
    </div>
    <div id="pic2">
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption>Jack Ferreni</figcaption>
      </figure>
     </div>
     <div id="pic3">
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption> Jack Ferreni</figcaption>
      </figure>
     </div>
  </section>
  <footer> 


</body>

一些影响这一点的问题导致标题直接位于图像下方

在锚点容器中有一个绝对图像位置。因此，容器将仅调整其大小以适合fig标题。删除此位置：绝对

在每个fig标题上都设置了页边距顶部和左侧。这会导致标题与图像保持距离并向右移动。把这个也拿走。

最后，向figure元素添加一个文本对齐中心，使标题在下方和中心对齐

请参阅下面的代码片段

正文{
背景色：#333333；
}
标题{
背景色：黑色；
左边距：200px；
右边距：200px；
边缘顶部：20px；
填充顶部：100px；
}
img{
宽度：100%；
身高：100%；
}
部分{
背景色：#eff8fb；
左边距：200px；
右边距：200px；
边框：10px纯黑；
垫底：20px；
}
页脚{
背景色：黑色；
左边距：200px；
右边距：200px；
边缘底部：20px；
填充底部：100px；
边框：10px纯黑；
}
#文本aboutUs>p{
颜色：黑色；
左侧填充：30px；
右侧填充：15px；
填充顶部：0px；
边际上限：0px；
}
身材{
文本对齐：居中；
}
#文本aboutUs>P：第一个字母{
字号：3em；
}
#文本aboutUs>figure>a>img{}
#文本aboutUs>figure>a>img:悬停{
边框：10px脊黑色；
}
#关于Tus>图>figcaption的文本{
字体系列：无衬线；
字体：斜体；
字体大小：20px；
}
#图2>图>a>img{
位置：相对位置；
}
#图2>图形>a>图像：悬停{
边框：10px脊黑色；
}
#图片2>图>图{
字体系列：无衬线；
字体：斜体；
字体大小：20px；
}
#图3>图形>a>图像：悬停{
边框：10px脊黑色；
}
#图3>图>图3{
左边距：600px；
页边空白顶部：0px字体系列：无衬线；
字体：斜体；
字体大小：20px；
}


第一网站
U&C
在此页面中，您可以找到有关此组每个成员的一些信息。这些信息包括他们的个人兴趣、爱好和其他一些有关被选中人的有趣信息。为了访问您需要的信息
只需要点击你想要的人
杰克费雷尼
杰克费雷尼

您的html中的标题有什么问题？…您希望它是什么？我希望标题正好位于每张图片下方，但当我向它们提供css时，它不起作用

body{
      background-color:#333333;
    }
header{
        background-color:black; 
        margin-left:200px;
        margin-right:200px;
        margin-top:20px;
        padding-top:100px;
      }
section{
        background-color:#eff8fb; 
        margin-left:200px;
        margin-right:200px;
        border:10px solid black;
        padding-bottom:20px;
       } 
footer{
        background-color:black; 
        margin-left:200px;
        margin-right:200px;
        margin-bottom:20px;
        padding-bottom:100px;
        border:10px solid black;
       }
#text-aboutUs > p{
                  color:black;
                  padding-left:30px;
                  padding-right:15px;
                  padding-top:0px;
                  margin-top:0px;
                 }
#text-aboutUs > P:first-letter{
                               font-size:3em;
                              }
#text-aboutUs > figure > a > img{
                                  position: absolute;
                                  left:500px;
                                  top:270px;
                                }
#text-aboutUs > figure > a > img:hover{
                                    border:10px ridge black;
                                  }
#text-aboutUs >  figure > figcaption{
                                     margin-left:300px;
                                     margin-top:420px;
                                     font-family:sans-serif;
                                     font-style:italic;
                                     font-size:20px;
                                    }
#pic2 > figure > a > img{
                          position:relative;
                          top:50px;
                          left:140px;
                          padding-bottom:130px;

                        }
#pic2 > figure > a > img:hover{
                                    border:10px ridge black;
                              }
#pic2 >  figure > figcaption{        
                               margin-top:0px;    
                               margin-left:400px;
                               font-family:sans-serif;
                               font-style:italic;
                               font-size:20px;
                             }
#pic3 > figure > a > img{
                          position: absolute;
                          left:1100px;
                           top:270px;
                        }
#pic3 > figure > a > img:hover{
                                    border:10px ridge black;
                              }
#pic3 >  figure > figcaption{  
                              margin-left:600px;
                              margin-top:0px
                              font-family:sans-serif;
                              font-style:italic;
                              font-size:20px;
                             }