How to center the child elements beyond the parent element? - html

【 ALL RESOLVED 】(comment reference)
Problem
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)
And what matters is that I want to vary based on .meter. (That's it already)
Is there any good way to do it?
Complete image
▼ Decomposition of effect
▼ The current situation is as per the code snippet.
code
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>

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>

Related

Why do captions break my responsive img grid?

Blockquote Hello, I'm trying to make a responsive img grid with the following : 2 imgs at the top, sharing 50% of the space, and 4 imgs underneath with the same aspect ratio.
The grid works just fine, until I've decided to add a small caption. What am I doing wrong ?
Thank you, have a nice one,
Kieran.
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left;
width: 100%;
}
.grid-container1 h3 {
font-size: 1rem;
padding: 5px;
float: bottom;
}
.grid-container1 {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 50%;
padding: 5px;
}
.grid-container2 img {
vertical-align: top;
width: 25%;
float: left;
padding: 5px;
}
.grid-container3 img {
vertical-align: top;
width: 33.33%;
float: left;
padding: 5px;
}
<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.grid-container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr, 1fr;
padding: 5px;
gap: 5px;
}
.grid-container figure {
margin: 0;
}
.grid-container figure:nth-child(1) {
grid-column: 1 / 3;
}
.grid-container figure:nth-child(2) {
grid-column: 3 / 5;
}
.grid-container img {
display: block;
width: 100%;
height: auto;
}
<div class="grid-container">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>
Try this:
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left;
width: 100%;
}
.grid-container1, .grid-container2 {
display: flex;
}
.grid-container1 figcaption {
font-size: 1rem;
padding: 5px;
float: bottom;
}
.grid-container1 {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 100%;
}
.grid-container2 img {
vertical-align: top;
width: 100%;
float: left;
}
<div class="grid-container1">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>
<div class="grid-container2">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>

Scrolling the images left and right with the mouse

I made a Netflix clone site, I want to put mouse scrolling or right and left arrows to scroll the movie posters left and right, how can I do this?. Currently, the banners scroll only with the middle mouse button and it is very difficult. I would appreciate if you could help me with this. I am new to software.
My site:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim Listem</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Banner -->
<div class="banner" id="banner">
<video id="video" class="banner" poster="images/videoframe.jpg" style="pointer-events:none;">
<source src="images/bridgerton.mp4" type="video/mp4" />
</video>
<div class="banner__contents">
<h1 class="banner__title">Bridgerton</h1>
<div class="banner__buttons">
<button class ="banner__button" id="btnPlayPause" accesskey="p" onclick="playPauseVideo()">Play</button>
<button class ="banner__button">My list</button>
</div>
<div class="banner__desc">
Büyük şehirden gelen bir diş hekimi, küçük bir sahil kasabasında muayenehane açar. Burada her bakımdan onun tam zıddı olan becerikli ve yakışıklı bir adamla tanışır.
</div>
</div>
</div>
<!-- Netflix Orginals -->
<div class="row first">
<h2>En sevdiğim Film ve Diziler</h2>
<div class="row_posters">
<img src="images/1.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/2.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/3.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/4.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/5.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/6.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/7.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/8.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/9.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/10.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/11.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/12.jpg" alt="" class="row_poster row_posterLarge"/>
</div>
</div>
<!-- Trending Now -->
<div class="row">
<h2>Trending Now</h2>
<div class="row_posters">
<img src="images/93.jpg" alt="" class="row_poster"/>
<img src="images/94.jpg" alt="" class="row_poster"/>
<img src="images/95.jpg" alt="" class="row_poster"/>
<img src="images/96.jpg" alt="" class="row_poster"/>
<img src="images/97.jpg" alt="" class="row_poster"/>
<img src="images/98.jpg" alt="" class="row_poster"/>
<img src="images/99.jpg" alt="" class="row_poster"/>
<img src="images/100.jpg" alt="" class="row_poster"/>
<img src="images/93.jpg" alt="" class="row_poster"/>
<img src="images/94.jpg" alt="" class="row_poster"/>
<img src="images/95.jpg" alt="" class="row_poster"/>
<img src="images/96.jpg" alt="" class="row_poster"/>
<img src="images/97.jpg" alt="" class="row_poster"/>
<img src="images/98.jpg" alt="" class="row_poster"/>
<img src="images/99.jpg" alt="" class="row_poster"/>
<img src="images/100.jpg" alt="" class="row_poster"/>
</div>
</div>
<script>
player = document.getElementById('video');
btnPlayPause= document.getElementById('btnPlayPause');
player.addEventListener('play', function(){
changeButtonType(btnPlayPause, 'Pause');
}, false)
player.addEventListener('pause', function(){
changeButtonType(btnPlayPause, 'Play');
}, false);
function playPauseVideo(){
if (player.paused || player.ended) {
changeButtonType(btnPlayPause, 'Pause');
player.play();
} else {
changeButtonType(btnPlayPause, 'Play');
player.pase();
}
}
function changeButtonType(btn,value){
btn.title = value;
btn.innerHTM = value;
}
</script>
</body>
</html>
CSS Code:
*{
margin: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #111;
}
.row_poster{
width: 100%;
object-fit: contain;
max-height: 100px;
margin-right: 10px;
transition: transform 450ms;
}
.row_posters{
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding: 20px;
}
.row_poster:hover{
transform:scale(1.00);
}
.row_posters::-webkit-scrollbar{
display: none;
}
.row_posterLarge {
max-height: 250px;
}
.row_posterLarge:hover{
transform: scale(1.09);
}
.row{
color: white;
margin-left: 20px;
}
.first{
margin-top: 3%;
}
.banner{
position: relative;
color:white;
object-fit: cover;
height: 550px;
width: 100%;
}
#banner:after {
content: '';
position: absolute;
left:0;
bottom:0;
width: 100%;
height: 100px;
background-image: linear-gradient(to top, #111, transparent);
}
.banner__contents{
position: relative;
margin-left: 30px;
height: 190px;
margin-top: -15%;
}
.banner__title{
font-size: 3rem;
font-weight: 900;
padding-bottom: 0.3rem;
}
.banner__desc{
width: 45rem;
line-height: 1.3;
padding-top: 1rem;
font-size: 0.8rem;
max-width: 360px;
height: 180px;
}
.banner__button{
cursor: pointer;
color: white;
outline: none;
border: none;
font-weight: 800;
border-radius: 0.2vw;
padding-left: 2rem;
padding-right: 2rem;
margin-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(51, 51, 51,0.5 );
}
.banner__button:hover{
color: #000;
background-color: #e6e6e6;
transition: all 0.2s;
}

how to align images horizontally?

I tried used display: inline-block and other stuff like changing the width but my images only show to be vertical.
.figure {
display: inline-block;
}
figure.item {
color: #676767;
background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
display: inline-block;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: block;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
Right now the images are showing vertically and with text under. And i need the images to be horizontally with text under they.
Using Flex-box
I make a wrap div for every img and text.
.item {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: inline-block;
}
.wrap{
width:100px;
text-align: center;
}
<figure class="item">
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
</figure>
figure.item {
color: #676767;
background-color: #ffffff;
text-align: center;
}
.item img {
width: 100px;
height: 100px;
}
figure {
width: 25%;
float: left;
margin: 0;
text-align: center;
padding: 0;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
There are several issues with your snippet:
The first line .figure is not meant to be a class but a element selector (i.e. .figure !== figure)
Block-Elements will be displayed underneath each other by default.
Try to use flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.row {
display: flex;
}
<div class="row">
<figure>
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
</div>

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

【 ALL RESOLVED 】
Problem
I'm trying to create a skill meter.
current status:
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
A picure of "Because I want to do this, I want to base this width of green" (I thought it was easy to image)
Update status
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>
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.
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.

I want caption for image without hperlink underscore in horizontal view

<center><figure>
<img class="img-circle" src="doctor.png" height="70" width="70" hspace="30"/><figcaption>Doctors</figcaption>
<img class="img-circle" src="lab.jpg" height="70" width="70" hspace="30"/><figcaption>Labs</figcaption>
<img class="img-circle" src="spa.png" height="70" width="70" hspace="30"/><figcaption>Spa</figcaption>
<img class="img-circle" src="gym.png"height="70" width="70" hspace="30"/><figcaption>Gym</figcaption>
</center></figure>
I may have misunderstood the question but I think this is what you want.
I've used display: inline-block; so that each figure will display horizontally (of course if there is not enough space it will move to the next line).
I also moved your HTML around a little so each image has it's own figure.
figure {
display: inline-block;
text-align: center;
margin: 20px;
}
figure a {
text-decoration: none;
}
<center>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Doctors</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Labs</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Gym</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Spa</figcaption>
</a>
</figure>
</center>
Then of course you could start going a bit fancier, making it animated using css animations and using media queries
figure.menu {
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
height: 70px;
margin: 20px
}
figure.menu a {
text-decoration: none;
}
figure.menu figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: -30%;
opacity: 0;
width: 100%;
transition: all .3s ease-in-out;
}
figure.menu:hover figcaption {
bottom: 0;
opacity: 1;
}
#media only screen and (max-width: 500px) {
center {
width: 250px;
margin: 0 auto;
}
}
#media only screen and (max-width: 250px) {
center {
width: 110px;
margin: 0 auto;
}
figure.menu figcaption {
bottom: 0;
opacity: 1;
}
}
<center>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Doctors</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Labs</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Gym</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Spa</figcaption>
</a>
</figure>
</center>
Mousing over one of the images/links will make the name slide in.
To get rid of the underlines of a link, all you will need to do in your CSS file is:
a {
text-decoration: none; // removes the underline for all links
color: inherit; // removes the blue color and sets the parents color for all links
}
To get a image and text horizontally aligned with each other, what I would do at least would be to create a few lists that you align horizontally and add some style to:
.horizontal-view ul {
list-style-type: none;
}
.horizontal-view li {
margin-left: auto;
margin-right: auto;
display: inline-table;
}
.picture {
margin-right: 10px;
}
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My First Image Caption</li>
</ul>
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My Second Image Caption</li>
</ul>
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My Third Image Caption</li>
</ul>