Issue
This is my first post and I'm excited to be here with you all.
I'm having an issue centering 2 overlaying png images..
This is what I currently have:
Now that I have the 2 images located and overlayed how I want them to, how do I center both as if it were one image?
this is my html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="top-container">
<img src="images/goku1.png" alt="goku" class="goku">
<img src="images/dbzlogo.png" alt="dbz" class="dbzlogo">
</div>
</body>
</html>
I've tried different codes and methods and while some do work, they only center one of the images.
What am I doing wrong? thanks so much!
Solution
html,body {
width: 100%;
height: 100%
}
.container {
width: 100%;
display: flex;
align-items: center;
}
.dbzlogo {
width: 70%;
margin-bottom: 2%;
}
.goku {
width: 35%;
margin-right: -10%;
}
.vegeta {
width: 35%;
margin-left: -18%;
margin-bottom: 5%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body class="body">
<div class="container">
<img src="https://i.ibb.co/09MYrjj/goku1.png" alt="goku" class="goku">
<img src="https://i.ibb.co/cYfLgWx/dbzlogo.png" alt="dbz" class="dbzlogo">
<img src="https://i.ibb.co/D90PB7G/vegeta1.png" alt="vegeta" class="vegeta">
</div>
</body>
</html>
Answered By - Haim Abeles
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.