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

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

我在这里做的是做figure > .meter绝对和figure > figcaption作为相对。 通过这样做，我可以将text-align: center添加到父div并修复文本问题的居中。 现在无论文本有多长，它总是以你想要的方式位于中心。

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

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