Div Raj Div Raj - 1 month ago 6
HTML Question

Image not moving to centre of webpage

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

Answer Source

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.