Why when I resize the page, the circles remain the same, but the check mark inside goes down. How to fix it and keep it relative?
.circle{
background-color: green;
height: 3.7vh;
width: 3.7vh;
vertical-align: top;
margin-left: 1.25vw;
background-color: #bbb;
border-radius: 50vw;
display: inline-block;
}
img{
display: inline-block;
position: relative;
line-height: normal;
width: 0.83vw;
height: 1.48vh;
vertical-align: middle;
}
<span >
<img src="gal.svg"/>
</span>
<span >
</span>
url to img : https://i.imgur.com/Nt7Qd4n.png
CodePudding user response:
This is another way to solve your problem with the help of Flexbox.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Solution</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle {
background-color: green;
height: 3.7vh;
width: 3.7vh;
margin-left: 1.25vw;
border-radius: 50vw;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 0.5rem;
height: 0.5rem;
}
</style>
</head>
<body>
<span >
<img
src="your_image_path"
/>
</span>
</body>
</html>
CodePudding user response:
First way to solve your problem with the help of position property of css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Solution</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle {
background-color: green;
height: 3.7vh;
width: 3.7vh;
vertical-align: top;
margin-left: 1.25vw;
border-radius: 50vw;
display: inline-block;
position: relative;
}
img {
display: inline-block;
position: absolute;
top: 30%;
left: 30%;
width: 0.5rem;
height: 0.5rem;
}
</style>
</head>
<body>
<span >
<img
src="your_images_path"
/>
</span>
<span > </span>
</body>
</html>