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

Question

【已解决}

---

问题

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

当前状态：

我想使元素的宽度与 private static readonly object locker = new object(); lock (locker) { using (FileStream fileStream = new FileStream("FilePath"), FileMode.Append)) { using (StreamWriter writer = new StreamWriter(fileStream)) { writer.WriteLine(log); } } } 相匹配。
换句话说，如何在.meter（子元素）处设置块的标准？
（在上面的gif中，.meter的位置）

对不起，我的英语不好。如果感到困惑，请问我：）

---

完整图片

总体图片

“因为我要这样做，所以我想以此绿色宽度为基数”（我认为很容易成像）

---

更新状态

感谢您的建议！
现在就是这样
我想要基于img.meter的边距。（现在.meter是标准）
而且自figcaption起，我尝试对其进行更正，但是它没有用。
多一点，请大家发挥自己的智慧！

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

【 edit ：而且，有了这个问题的答案（▲），一切都已解决！非常感谢你。 ）

---

代码

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

figcaption

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;
 }

Answer 1

浏览器默认为元素添加样式。通常，您可以使用一些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;
}

您将覆盖浏览器样式，并消除图形元素上的空白。

Answer 2

据我了解，您需要将内部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>

如有任何问题，请通知我。