Search code examples
htmlcsscss-grid

Center Img Vertically in Div

I am trying to center an image in a div, but no methods are working. I have tried to use margin: auto; and many of the other popular methods but they are not working.

<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>

Solution

  • You could use display:flex on the image parent container which is image-holder and use align-item:center so it could vertcially align

    I edited your width for img a little for better showing purpose.

    /* 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{
    max-width: 100px;
    max-height: 100px;
    padding:30px;
    
    
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    vertical-align: middle;
   
}

.image-holder{
     display: flex;
     align-items: center;
}
.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;
}
        <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>
    You could use display:grid and place-item:center on parent element as well.

    /* 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{
    max-width: 100px;
    max-height: 100px;
    padding:30px;
    
    
    border-style: solid;
    border-color: black;
    border-radius: 10%;
    border-weight: 1px;
    vertical-align: middle;
   
}

.image-holder{
     display: grid;
    place-content: center;
}
.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;
}
    <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>