如何将子元素放在特定子元素的中心？

Question

【全部决议】

---

问题

我正在尝试创建一个技能表。

当前状态：

我想将元素的宽度与.meter相匹配。 换句话说，如何在.meter（子元素）中设置块的标准？ （在上面的gif，img.meter的地方）

如果我的英语不好，我很抱歉。如果它令人困惑，请问我:)

---

完整的图像

整体情况

“因为我想做这个，我想基于这个绿色的宽度”（我觉得很容易想象）

---

更新状态

感谢您的建议！ 现在就是这样。 我想基于.meter的保证金..（现在figcaption是标准） 自从figcaption上升以来，我试图纠正它，但它没有奏效。 再多一点，请大家借用你的智慧！

（我不能问下一个问题为什么，所以我创建了一个新帐户并询问） - > How to fit the width of a specific child element?

【编辑：并且，回答这个问题（▲），一切都已经解决了！非常感谢你。 】

---

码

解决了标题问题（谢谢！） ：

html {
 font-size: 62.5%;
 }
.data {
 padding-top: 1.7rem;
 padding-bottom: 1.7rem;
 }
.skill li {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
 }
 .skill li :last-child {
   margin-right: 0;
   }
.code {
 margin-top: 1.7rem;
 }
figure {
 margin-right: .9rem;
 font-size: 1rem;
 position: relative;
 height: 4.4rem;   /* add */
 }
 figure > img {
   top: 0;
   bottom: 0;
   }
 figure > .meter {
   height: 4.4rem;
   /* add */
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
   /* /add */
   }
 figure > figcaption {
   line-height: 1;
   text-align: center;
   }
.meter-t {
 height: 2.3rem;
 display: block;
 position: absolute;
 /* top: 0; (delete) */
 bottom: 0;
 right: 0;
 /* left: 0; (delete) */
 /* margin: auto; (delete) */
 /* add */
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 /* /add */
 }
.PHP > .meter-t {
 width: 2.4rem;
 }

<section class="skill">
   <p class="title">skill</p>
   <ul class="data">
     <li class="tool">
       <figure class="Illustrator">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
         <figcaption>Illustrator</figcaption>
       </figure>
       <figure class="Photoshop">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
         <figcaption>Photoshop</figcaption>
       </figure>
       <figure class="Indesign">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
         <figcaption>Indesign</figcaption>
       </figure>
       <figure class="Vectorworks">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
         <figcaption>Vectorworks</figcaption>
       </figure>
       <figure class="Shade">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
         <figcaption>Shade</figcaption>
       </figure>
     </li>
     <li class="code">
       <figure class="HTML">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
         <figcaption>HTML</figcaption>
       </figure>
       <figure class="CSS">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
         <figcaption>CSS</figcaption>
       </figure>
       <figure class="Javascript">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
         <figcaption>Javascript</figcaption>
       </figure>
       <figure class="PHP">
         <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
         <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
         <figcaption>PHP</figcaption>
       </figure>
     </li>
   </ul>
 </section>

Answer 1

据我所知，你需要内部img集中在外部img。

请使用以下示例。

figure{
  position: relative;
  width: 100%;
  /* height equal to the height of outer image*/
  height: 400px;
}
.meter{
   border: 1px solid red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.meter-t{
  border: 1px solid red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
  

<figure class="Photoshop">
  <img class="meter" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png" alt="intermediate" />
  <img class="meter-t" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/40px-Cat_silhouette.svg.png" alt="Photoshop" />
  <figcaption>Photoshop</figcaption>
</figure>

如有任何问题，请告诉我。

Answer 2

默认情况下，浏览器会向元素添加样式。作为一般规则，您可以使用一些reset rules来覆盖它们。

在这种情况下，Chrome正在添加

figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

因此，如果您添加到样式表

figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

您将覆盖浏览器样式并消除图元素的边距。