Question

我正在尝试将CSS菜单放在中心但我遇到了问题，基本上我希望它位于我的content div的中心。目前，它从左侧显示。有谁知道我必须添加什么来实现我想要的？以下是我的代码。

我的index.html

<head>

<meta content="en-ie" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

 <title>Title</title>

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

</head>

<body>

<div id="contain">

    <div id="header">

        <p><img alt="" height="67" src="header.png" width="431" /><br />
        </p>
    </div>

<div id="tabs">
    <ul>
        <li><a href="http://www.free-css.com/"><span>Item 1</span></a></li>
        <li><a href="http://www.free-css.com/"><span>Item 2</span></a></li>
        <li><a href="http://www.free-css.com/"><span>Item 3</span></a></li>
    </ul>
</div>

<div id="content">


</div>

<div id="footer" style="width: 93px; height: 12px">

</div>

 </body>

</html>

我的style.css

body{
background-color: #292929;

}
  p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
    }

   h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
    }

    a:link {
    COLOR: #00CCFF;
    }
   a:visited {
     COLOR: #00CCFF;
   }
   a:hover {
    COLOR: #00CCFF;
     }
  a:active {
   COLOR: #00CCFF;
    }

   /* DIV's */

   #contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
    }
    #header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
    }

   #content { 
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;

    }

    #footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;

}

   #tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #292929;
line-height:normal;
}

   #tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}

    #tabs li {
display:inline;
margin:0;
padding:0;
}

   #tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

   #tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

   /* Commented Backslash Hack hides rule from IE5-Mac \*/
  #tabs a span {float:none;}

  /* End IE5-Mac hack */
  #tabs a:hover span {
color:#FFF;
}

   #tabs a:hover {
background-position:0% -42px;
}

   #tabs a:hover span {
background-position:100% -42px;
}

Answer 1

您可以为#tabs ul设置固定宽度（例如width:200px;），然后将margin:0;更改为margin:0 auto; {/ 1}} >

Answer 2

如果我做对了，你需要水平对中未知宽度的块。我看到两种方法：

简单的一个：您将省略标签的所有花哨标记，并保留内联LI中的内嵌链接，并将display: block;添加到您的#tabs ul规则中。没有浮动，菜单中没有块，只是简单的内联文本。这样可行，但不会有太多“可修饰”。 pastebin.me/58fe73dd82496444fd7e129fc5830b4b
复杂的一个：在ul周围添加额外的包裹，这样你就可以#tabs #tabs-in ul li …


    #tabs {
    float:left;
    width:100%;
    position: relative;
    }

    #tabs-in { 
    position: relative;
    float: left;
    left: 50%;
    }
    #tabs ul {
    margin:0;
    padding:0;
    list-style:none;
    text-align: center;
    display: block;
    overflow: hidden;
    float: left;
    position: relative;
    left: -50%;
    }
    #tabs li {
    display:block;
    float: left;
    margin:0;
    padding:0;
    }

http://pastebin.me/23c1b8a60657962f1d8c8baef2700473这个旧的“将它的半父母宽度向右移动然后它移动了一半自己的宽度”技巧很有效。但祝你好运，并保持跨浏览器的兼容性：]

将div放在div中（在div内），它本身位于页面的中心

2 个答案: