Html 将具有已知宽度和未知窗口大小的div居中

（出于兼容性原因，仅使用css和html）

我目前有一个菜单，我包括在多个页面上（通过对象和指向父对象的链接），我正试图将div水平居中。使用969px设置的宽度和边距，它将正确居中，但当窗口大小变得太小时，菜单将完全消失

以下是我迄今为止构建的代码：

<link href="thestyles.css" rel="stylesheet" media="screen">
<div id='themagic'>
<div class='pipe'>|</div>
<a href='./index.html' target="_top"><div id='navbutton'>Home</div></a> <div class='pipe'>|</div> 
<a href='./HH.html' target="_top"><div id='navbutton'>Heroin Hypothesized</div></a> <div class='pipe'>|</div> 
<a href='./PR.html' target="_top"><div id='navbutton'>Pain Relief</div></a> <div     class='pipe'>|</div> 
<a href='./IPF.html' target="_top"><div id='navbutton'>IPF End-Of-Life Care</div></a> <div class='pipe'>|</div> 
<a href='./HAT.html' target="_top"><div id='navbutton'>Heroin Assisted Treatment</div></a> <div class='pipe'>|</div> 
<a href='./Cited.html' target="_top"><div id='navbutton'>Works Cited</div></a> <div class='pipe'>|</div>
</div>

---

要使div居中，只需将此css添加到div中

#div{
     margin-left:auto;
     margin-right:auto;

}

---

您已经使用id

navbutton

次了<代码>IDs不能相同。它们必须是独一无二的

改用

class

尝试：

注:

内联块

在元素之间添加空白。若要删除空白，请将元素写在同一行上，而不是写在单独的行上

改变

<div class='pipe'>|</div>
<a href='./index.html' target="_top"><div id='navbutton'>Home</div></a> <div class='pipe'>|</div>..

|
|..

到

---

|您可以尝试将
#magic
更改为流体宽度，例如100%

如果窗口太小，我看不到它会消失。我只是看到它会导致一个水平滚动条。我的代码中已经有了，我的问题是当窗口变小时，菜单会完全消失。
#themagic{text-align:center;}
.navbutton,.pipe{display:inline-block;} /* remove float:left*/

<div class='pipe'>|</div>
<a href='./index.html' target="_top"><div id='navbutton'>Home</div></a> <div class='pipe'>|</div>..

<div class='pipe'>|</div><a href='./index.html' target="_top"><div class='navbutton'>Home</div></a><div....