Question

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

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

Answer 1

我的样式对我来说是正确的，并且在我测试时工作。我确认您的样式表实际上已加载。

尝试添加

azurerm_public_ip

到<style> img.center { display: block; margin: 0 auto; } </style>。这样我们就可以诊断出它是CSS本身还是其他一些导致问题的问题。

图像没有移动到网页的中心

1 个答案: