Photoshop Question posted in
The official user guide can be found here.

How to place a child element at the center of a specific child element? – Photoshop

【 ALL RESOLVED 】

Problem

I’m trying to create a skill meter.

current status:

enter image description here

I want to match the width of the element to the .meter.
In other words, how to set the standard of the block at .meter (child element)?
(In the above gif, place of img.meter)

I’m sorry if my English is bad. If it is confusing, please ask to me 🙂

Complete image

Overall picture

enter image description here

A picure of “Because I want to do this, I want to base this width of green” (I thought it was easy to image)

enter image description here

Update status

now

Thanks for the advice!
It’s like this now.
I would like margin based on .meter.. (now figcaption is the standard)
And since figcaption went up, I tried to correct it, but it did not work.
A little more, please lend your wisdom everyone!

(I couldn’t ask the next question why, so I created a new account and asked)
-> How to fit the width of a specific child element?

【 edit: And, with answers to this question (▲) everything was SETTLED! Thank you very much. 】

code

solved title problem ver. (Thank you!) :

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

2

Answers


  1. 0

    Browsers add styles to elements, by default. You can use some reset rules to override them, as a general rule.

    In this case, Chrome is adding 

    figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

    So if you add to your stylesheet

    figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

    You’ll override the browser styles and eliminate the margins on your figure element.

    Login or Signup to reply.
  2. 0

    As far as I understood, you need inner img centered to the outer img.

    Please use the example below.

    figure{
  position: relative;
  width: 100%;
  /* height equal to the height of outer image*/
  height: 400px;
}
.meter{
   border: 1px solid red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.meter-t{
  border: 1px solid red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
  
    <figure class="Photoshop">
  <img class="meter" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png" alt="intermediate" />
  <img class="meter-t" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/40px-Cat_silhouette.svg.png" alt="Photoshop" />
  <figcaption>Photoshop</figcaption>
</figure>

    Let me know in case of any issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search