Div Raj Div Raj - 1 month ago 6
HTML Question

Image not moving to centre of webpage

<link rel="stylesheet" type="text/css" href="MainPage.css">

<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 id="main">
<img id="name" src="Name.png" class="center">

<span id="Menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
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";



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

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

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