I have been struggling to center an image within a div, but all the usual methods like using margin: auto; do not seem to work. I have tried various popular techniques with no success.
<style>
/* Add a black background color to the top navigation */
.topnav {
background-color: #1F363D;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBBBBB;
color: #1F363D;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #808782;
color: white;
}
body{
margin: 0px;
}
a{
font-family: monospace;
}
h1 {
font-family: monospace;
}
.header {
text-align: center;
background-color: #000088;
color: white;
padding: 5px;
}
img{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-radius: 10%;
border-weight: 1px;
vertical-align: middle;
}
.grid-holder {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-templete-rows: 100px 100px 100px 100px;
gap: 20px;
height: 100%;
width: fit-content;
margin: auto;
pading: 5px;
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 10px;
}
#mastermind-holder {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
}
#simon-holder {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
.grid-item{
text-align: center;
padding: 5px;
border-style: solid;
border-color: black;
border-radius: 10%;
border-weight: 1px;
width: 100px;
}
.grid-item a {
border-style: solid;
border-color: black;
border-radius: 10%;
border-weight: 1px;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio - Projects</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1>Portfolio</h1>
</div>
<div class="topnav">
<a href="/index.html">Home</a>
<a class="active" href="/projects.html">Projects</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="grid-holder">
<div class="grid-item" id="mastermind-holder">
<div class="image-holder">
<img src="/mastermind-icon.png">
</div>
<a>Mastermind</a>
</div>
<div class="grid-item" id="simon-holder">
<img href="">
<a>Simon</a>
</div>
</div
<script src="script.js"></script>
</body>
</html>