如何将子元素居于父元素之外？

Question

【已解决）（注释参考）

---

问题

我想将figcaption下面的.meter居中对齐。
但是父元素的框架会妨碍您的工作，
例如Vectorworks（因为字符长于.meter）

重要的是，我想根据.meter进行更改。 （就这样）
有什么好办法吗？

---

完整图片

▼效果分解

▼当前情况取决于代码段。

---

代码

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;
  margin-bottom: 2.1rem;
  font-size: 1rem;
  position: relative;
  height: 4.4rem;
  }
figure > img {
  top: 0;
  bottom: 0;
  }
figure > .meter {
  height: 4.4rem;
  position: absolute;
  position: relative;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  }
figure > figcaption {
  position: absolute;
  line-height: 1;
  text-align: center;
  bottom: -1.5rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  }

.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>

Answer 1

我在这里所做的工作是if(count == 0) { printf("no tablet\n"); } else { printf("%d\n",max); } 绝对的，figure > .meter是相对的。这样，我可以将figure > figcaption添加到父div并解决文本居中的问题。现在，无论文本多长，它始终会以您希望的方式居中。

text-align: center

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;
  margin-bottom: 2.1rem;
  font-size: 1rem;
  position: relative;
  height: 4.4rem;
  text-align: center;
  }
figure > img {
  top: 0;
  bottom: 0;
  }
figure > .meter {
  height: 4.4rem;
  position: absolute;
  /* position: relative; */
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  }
figure > figcaption {
  position: relative;
  line-height: 1;
  text-align: center;
  bottom: -5.5rem;
/*   left: 0;
  right: 0;
  margin: 0 auto; */
  }

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