子要素の幅に合わせたい

Question

問題

要素の幅を、img.materのメーターの所に合わせたい。
つまりブロックの基準を、メーター（子要素）の部分にするには？

イメージ

▼ 全体像

▼ こうしたいからこの緑の幅を基準にしたい、の図（イメージ湧きやすいかなと思って）

現状

（可変時）

コード

<section class="skill">
   <p class="title">skill</p>
   <ul class="data">
     <li class="tool">
       <figure class="Illustrator">
         <img class="mater" src="img/4.svg" alt="advanced" />
         <img class="mater-t" src="img/Ai.svg" alt="Illustrator" />
         <figcaption>Illustrator</figcaption>
       </figure>
       <figure class="Photoshop">
         <img class="mater" src="img/3.svg" alt="intermediate" />
         <img class="mater-t" src="img/Ps.svg" alt="Photoshop" />
         <figcaption>Photoshop</figcaption>
       </figure>
       <figure class="Indesign">
         <img class="mater" src="img/2.svg" alt="elementary" />
         <img class="mater-t" src="img/Id.svg" alt="Indesign" />
         <figcaption>Indesign</figcaption>
       </figure>
       <figure class="Vectorworks">
         <img class="mater" src="img/3.svg" alt="intermediate" />
         <img class="mater-t" src="img/Vw.svg" alt="Vectorworks" />
         <figcaption>Vectorworks</figcaption>
       </figure>
       <figure class="Shade">
         <img class="mater" src="img/3.svg" alt="intermediate" />
         <img class="mater-t" src="img/Sd.svg" alt="Shade" />
         <figcaption>Shade</figcaption>
       </figure>
     </li>
     <li class="code">
       <figure class="HTML">
         <img class="mater" src="img/2.svg" alt="elementary" />
         <img class="mater-t" src="img/HTML.svg" alt="HTML" />
         <figcaption>HTML</figcaption>
       </figure>
       <figure class="CSS">
         <img class="mater" src="img/2.svg" alt="elementary" />
         <img class="mater-t" src="img/CSS.svg" alt="CSS" />
         <figcaption>CSS</figcaption>
       </figure>
       <figure class="Javascript">
         <img class="mater" src="img/1.svg" alt="beginner" />
         <img class="mater-t" src="img/JS.svg" alt="Javascript" />
         <figcaption>Javascript</figcaption>
       </figure>
       <figure class="PHP">
         <img class="mater" src="img/1.svg" alt="beginner" />
         <img class="mater-t" src="img/PHP.svg" alt="PHP" />
         <figcaption>PHP</figcaption>
       </figure>
     </li>
   </ul>
 </section>

.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; }
 figure > img {
   top: 0;
   bottom: 0; }
 figure > .mater {
   height: 4.4rem; }
 figure > figcaption {
   line-height: 1;
   position: absolute;  /* yoshinaviさんのアドバイスで追加 */
   text-align: center; }
.mater-t {
 height: 2.3rem;
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto; }
.PHP > .mater-t {
 width: 2.4rem; }

よろしくお願いします。

Comments

[yoshinavi]

「SCSS」ではなく「CSS」で提示してください。
flexで組むのであれば、子要素「.mater」にして、HTMLを組み直してみてください。

[EXIT]

『子要素「.mater」にして、HTMLを組み直す』とはどういうことでしょうか？

[yoshinavi]

言葉足らずでスミマセン。
<figure>がflexの基準なので、<img class ="mater">が基準になるように、HTMLやCSSを調整する必要があるかと思います。

提示のイメージ図では、<figcaption>が、<img class ="mater">より幅が大きくなる場合もあるように見えたので、<figure>を可変にしていても、結果的に<img class ="mater">ではなく<figure>が基準になります。

<figcaption>も「position:absolute;」にすると<figure>の中が<img class ="mater">だけなので、結果的に基準になりませんかね。

今の状態もスクリーンショットで提示されると、より良い回答もつくかとおもいます。

[EXIT]

おー確かに<figure>が基準になりました！
ただ下の<figcaption>を中央揃えにしたいので難しい所ですね…TT
ありがとうございます！

[m.ts10806]

>追記 について
私は低評価押してないですが、調べた内容や考えたことをきちんと書けば良いかと。
質問内容に書いてあることしか読み取れませんし、本当に調べず考えず質問する人も多数いるなかで、なにもその辺り書いてないのに切り分けるのは他人には不可能です。
あなた以上の知識技術や経験がある人からの指摘を素直に受け入れずうざいと切り捨てるなら、成長の見込みなしと判断されて誰も相手にしなくなるだけです。

[m.ts10806]

「成長の見込みなし」というより「学習の姿勢に問題あり」ですね。
質問者は教えを請う立場であることをお忘れなく。

[EXIT]

なぜまだ伸びているのかわかりませんが、
試行錯誤しながらやっていたのに、追記（投稿後数十分で-2もされ書いたもの）についてコメントを頂いた後からまた低評価が増えたため「これ以上は純粋な回答が得られない」つまり「先入観により価値のなくなった投稿」と判断し、投稿を削除状態にしています。
まだ低評価を押すなら、余程の物好きかと思います。

ちなみにmts10806さんのコメントは１コメ目だけならよかったですが、２コメ目で勝手に決めつけられ不快に思ったので返信していません。
調査したこと・試したことについては、"自分の思いつく限り検索し考えたが、近そうな事例も見当たらず質問に至った"ですかね…それともグーグルで調べた単語列を羅列すればいいのでしょうか。
ベテランの皆さんには分からないのかもしれませんが、初心者で経験知識も浅く名称自体も知らなかったり、全く似たような事例もこなしたことのない中で「こういうコード書けばいけるかも」となるのはまだ少しで
経験がないことについては、調査したこと・試したことと言われても書きようがないのです。（主に事例等を試して学んでいますが、全く似てないことだと全然分からない）
すいませんが、初心者には多いと思うのですが、そういうこともあることを知ってほしいです。
ただ低評価を押すだけ押して消える人は無責任且つひどいと感じます。回答が付きづらくなるので。

[m.ts10806]

同じこと何回も書かせないでください。
低評価受けるにはそれだけの理由があります。
一時は削除依頼を出されたようですがそれが受け入れられなかった意味は考えられた方が良いです。勝手に内容消してそのままにしてる方がタチが悪いですよ。低評価加速するだけです。
調べたことについては検索キーワードだけでもあれば調べた方向性が合っているかどうか判断できます。「質問するときのヒント」にも書いてありますよね。1-2を熟読してください。調べ方やその試し方が的確であれば質問するまでもなく自己解決できます。質問して回答待つより何倍も早く解決できます。
もし調べ方が間違っていたり調べて試した先の見方や試し方が間違っていれば、そこのアドバイスをしたほうが今後にも役立つとわかっているので、「調べて試した内容を書いてください」という意味での「丸投げ指摘」ですよ。
そこまで考えた上で、最も簡潔に伝える手段が低評価と捉えてください。誰も「押すだけ押して消えた」わけではないですよ。それこそ勝手な決めつけです。
初心者な時代が誰もがあるからこその指摘です。指摘はあくまで成長してほしいからするものであり、こき下ろすためにするものではありません。
それを「うざい」と対決姿勢を示す人に誰がアドバイスをしようと思うでしょうか？
姿勢と考えを改める必要がありますよ。

まあ、どんな質問でもいいので回答するつもりで自身の学習分野のタグの質問を見てみてください。わかることもあるでしょう。

[m.ts10806]

内部的な話ですが、コメントをしなくても低評価を押すだけでも質問編集したときに通知はきます。それだけ内容の改善を期待しているわけです。アドバイスをしようと思っている可能性もあります。
そこで編集されたと通知が来たときに今回みたいに内容削除されたりまだ丸投げだったり「うざい」と書いてあったとき、どう感じるでしょうね。考えてみてください。