问题
我正在尝试创建一个技能表。
（我不能问下一个问题，为什么，所以我创建了一个新帐户并询问）
当前状态：
我想将元素的宽度与.meter匹配。
换句话说，如何在.meter（子元素）处设置块的标准？
（在上面的gif中，img.meter的位置）
我想要基于.meter的边距。（现在figcaption是标准）
而且自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;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
figure > figcaption {
line-height: 1;
text-align: center;
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.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>最佳答案
您可以使用CSS网格吗？使用起来真的很容易
figure {
display: grid;
grid-template: 'meter' auto 'name' min-content / 4.4rem; // set the size of the meter here!
grid-row-gap: 1.5rem // just to space thing a little
}
figure img {
grid-area: meter; //put both images on the same area so they overlap
align-self: center; //center both horizontally and vertically
justify-self: center;
}
figure .meter {
width: 100%; // make it 100%, since the size is set on the grid template
}
figure .meter_t {
height: 50%; // same as before, let the size be dictated by the grid
width: 50%;
}
figure figcaption {
grid-area: name; //put the name at the bottom
justify-self: center; // so it overflows to the sides
}
您甚至可以删除所有定位代码，仅保留图像大小即可。
https://codepen.io/anon/pen/zbOYPO
编辑：添加标题的居中