0
<html>
<head>
<link rel="stylesheet" type="text/css" href="MainPage.css">
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">Home</a>
<a href="#">Services</a>

</div>

<div id="main">
<img id="name" src="Name.png" class="center">

<span id="Menu" style="font-size:30px;cursor:pointer"  onclick="openNav()">&#9776; Menu</span>
 </div>
 <script>
 function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
 }
 </script>
</body>

</html>

CSS:

img.center {
display: block;
margin: 0 auto;
 }

This is the code I am using to try and centre the image, but for some reason it is not working. Can you guys show me what I am doing wrong thank you.

Div Raj
  • 31
  • 2
  • 4

1 Answers1

1

Your styles look correct to me and work when I test. I'd verify that your stylesheet is actually loading at all.

Try adding 

<style>
  img.center {
    display: block;
    margin: 0 auto;
  }
</style>

to <head>. That way we can diagnose whether it is the CSS itself or some other issue causing trouble.

metahamza
  • 1,405
  • 10
  • 26
  • when I added this into my html it centered the image. So does that mean that the CSS is not loading? – Div Raj Aug 21 '17 at 19:00
  • Yep, that's my guess. Open your network inspector in your browser tools. I bet the stylesheet isn't loading. – metahamza Aug 21 '17 at 19:01
  • You can easily debug this by inspecting the image to see if the styles are applied or not. Putting style tag in the page and testing the css is ok for now but when you have something more substantial, this won't be a efficient way to debug – Huangism Aug 21 '17 at 19:02
  • @DivRaj Please mark my answer correct if it worked for you :) – metahamza Aug 21 '17 at 22:43