How do I make this image sit central?

Question

I'm trying to make this image sit central to the page (please click link below to see reference).

I've tried a few different things but nothing seems to be working. I'm sure it's something really simple but I'm new to this and need some help. Thankyou.

.homepage-image {
    display: inline-block;
    float: middle;
}

<!doctype html>
<html>

 <head>
  <title> shannonkelseyann</title>
  <link href="main.css" rel="stylesheet" type="text/css" />
 </head>

 <body>

  <header>
   <nav>
    <h1><img src="https://i.imgur.com/Nj06vm2.gif" alt="Image" align="right" height="65" width="650"></a></h1>
    <ul>
     <br><br><br><li><img src="https://i.imgur.com/c2UQ8om.png"></li>
     <br><li><a href="advertising.html"><img src="https://i.imgur.com/cQE71uK.png"></a></li>
     <br><li><a href="e-commerce.html"><img src="https://i.imgur.com/01tEvO3.png"></a></li>
     <br><li><a href="info.html"><img src="https://i.imgur.com/JjNQ54R.png"></a></li>
    </ul>
   </nav>
  <img class="homepage-image" src="https://i.imgur.com/O5ZNaft.png" alt="euan" width="30%" height="30%">
  </header>


  <footer><p style="text-align: center;">©2020 by shannonkelseyann <p style="text-align: right;"><img class="heart-image" src="https://i.imgur.com/Ql5LJ2c.png" alt="heart"></p></footer></p>

 </body>
</html>

Which element are you trying to get in the middle? The heart or the picture. — Henrik, May 02 '20 at 21:51
Can you provide more information about which image you're trying to center (and if you can provide what you've already tried)? — Jeff Berlin, May 02 '20 at 22:16

score 0 · Answer 1 · answered May 02 '20 at 21:56

This is the quick an dirty way, personally i would prefer to wrap the image in a container and give the container a flexbox, or if width is defined margin: 0 auto.

TLDR: You can make the img into a block element with display: block; And get it into the middle with Margin: 0 auto;

score 0 · Answer 2 · answered May 02 '20 at 22:21

You have two way's to accomplish this task

1.  .homepage-image {
       display: flex;
       justify-content: center;
    } 

2.  .homepage-image {
       display: block;
       margin: 0 auto;
    }

Through this you can resolve your problem very easily.

score 0 · Answer 3 · answered May 02 '20 at 22:25

If you want, you could wrap a <div> around the image and add text-align: center; to that <div>. I also removed float: middle; from the .homepage-image` CSS.

.homepage-image {
    display: inline-block;
}

<head>
  <title> shannonkelseyann</title>
  <link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header>
    <nav>
      <h1><img src="https://i.imgur.com/Nj06vm2.gif" alt="Image" align="right" height="65" width="650"></a></h1>
      <ul>
        <br><br><br><li><img src="https://i.imgur.com/c2UQ8om.png"></li>
        <br><li><a href="advertising.html"><img src="https://i.imgur.com/cQE71uK.png"></a></li>
        <br><li><a href="e-commerce.html"><img src="https://i.imgur.com/01tEvO3.png"></a></li>
        <br><li><a href="info.html"><img src="https://i.imgur.com/JjNQ54R.png"></a></li>
      </ul>
    </nav>
    <div class="image" style="text-align: center;">
      <img class="homepage-image" src="https://i.imgur.com/O5ZNaft.png" alt="euan" width="30%" height="30%">
    </div>
  </header>


  <footer><p style="text-align: center;">©2020 by shannonkelseyann <p style="text-align: right;"><img class="heart-image" src="https://i.imgur.com/Ql5LJ2c.png" alt="heart"></p></footer></p>

</body>

How do I make this image sit central?

3 Answers3