图像未移动到网页中心

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

这是我用来尝试使图像居中的代码，但由于某种原因它不起作用。你们能告诉我我做错了什么吗，谢谢。

你的风格对我来说是正确的，并且在我测试时有效。我会验证您的样式表是否确实正在加载。

尝试添加

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

到<head>.这样我们就可以诊断是CSS本身还是其他导致麻烦的问题。

相关内容

最新更新

热门标签：