I’m trying to recreate this:
I’m new to html & css and I’m finding some problems. My code is like this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="button-group-top">
<button class="button"> <img src="./svg/button_v.svg" alt="V"> </button>
<button class="button"> <img src="./svg/button_m.svg" alt="M"> </button>
<button class="button"> <img src="./svg/button_q.svg" alt="Q"> </button>
</div>
<div class="button-group-bot">
<button class="button"> <img src="./svg/button_x.svg" alt="X"> </button>
<button class="button"> <img src="./svg/button_d.svg" alt="D"> </button>
<button class="button"> <img src="./svg/button_v.svg" alt="V"> </button>
</div>
</div>
</body>
</html>
style.css:
html, body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
}
.button {
width: 50px;
height: 50px;
cursor: pointer;
margin: 10px;
background:none;
border:none;
}
As you can see I’m using the original svg files to be 1:1 with the design I’ve made, but I get this:
As you can see the letters are not lined up, it all messy. How should I do?