如何使子元素超出父元素的中心? [英] How to center the child elements beyond the parent element?

查看：67
本文介绍了如何使子元素超出父元素的中心?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

【已解决)(评论参考)

我想将下面的 figcaption 对齐到 .meter .
但是父元素的框架会妨碍您的工作，并且效果不佳.
例如

I want to centrally align figcaption below to.meter.
But the frame of the parent element gets in the way and will not work out a bit.
e.g. Vectorworks (Because the characters are longer than .meter)

重要的是，我想根据 .meter 进行更改.(就这样)
有什么好办法吗?

And what matters is that I want to vary based on .meter. (That's it already)
Is there any good way to do it?

>

▼效果分解

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

▼ The current situation is as per the code snippet. 

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>

推荐答案

我在这里所做的是 figure>.meter 绝对值和 figure>figcaption 作为相对.这样，我可以将 text-align:center 添加到父div并解决文本居中问题.现在，无论文本多长，它始终会以您希望的方式居中.

What i did here is made figure > .meter absolute and figure > figcaption as relative. By doing so i can add text-align: center to the parent div and fix your centering of text issue. Now no matter how long the text is it will always be in the center the way you wanted it to be.

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>

这篇关于如何使子元素超出父元素的中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆