Как центрировать дочерние элементы за родительским элементом? - PullRequest
Новая
       1

Как центрировать дочерние элементы за родительским элементом?

0 голосов
/ 24 февраля 2019

【 ВСЕ РАЗРЕШЕНО 】 (ссылка на комментарий)

Проблема

Я хочу выровнять figcaption по центру .meter.
Но рамка родительского элемента мешает и не сработает.
например, Vectorworks (потому что символы длиннее .meter)

И важно то, что я хочу изменитьна основании .meter.(Вот и все)
Есть ли какой-нибудь хороший способ сделать это?

Полное изображение

like this
center alignment

▼Разложение эффекта Decomposition of effect

▼ Текущая ситуация соответствует фрагменту кода.

код 

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>

1 Ответ

0 голосов
/ 24 февраля 2019

То, что я сделал здесь, сделано 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...