Question

（出于兼容性原因，仅使用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>

这里也是我构建的CSS：（注意我已经经历了很多不同的方法，没有一个产生正确的结果，所以其中一些可能会“扔掉”）

#nav
{
    float:left;
    width:100%;
    height:auto;
    overflow:hidden;
}

#themagic{
width:969px;
margin-left:auto;
margin-right:auto;
}

#navbutton
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    background: #e8edff;
    color: #669;
    display: inline-block;
    vertical-align: middle;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    border-radius: 15px;
    padding: 15px;
    float:left;
    font-size:75%;
}

#navbutton:hover
{
    background:#D0DAFD;
    color:#333399;
}

.pipe
{
    color:#669;
    float:left;
    padding:15px;
}

Answer 1

要将div居中，只需将此CSS添加到其中

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

}

Answer 2

您使用了navbutton次ID。 ID s不能相同。它们必须是独一无二的。

改为使用class。

尝试：

#themagic{text-align:center;}
.navbutton,.pipe{display:inline-block;} /* remove float:left*/

注：

inline-block在元素之间添加空格。要删除空格，请在同一行上写入元素，而不是将它们写在不同的行上。

更改

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

DEMO here.

Answer 3

您可以尝试将#themagic更改为流体宽度，例如100％。

http://jsfiddle.net/eshellborn/AdLcx/

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

3 个答案: