将 ul 放在 div 中（在 div 中）居中，而 div 本身在页面中居中

发布于 2024-10-09 19:17:29 字数 2766 浏览 0 评论 0原文

我正在尝试将 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;
}

原文

I'm attempting to center my CSS menu but I'm having issues, basically I'd like it to be in the center of my content div. Currently it's displaying from the left. Does anyone know what I would have to add to achieve what I want? Below is my code.

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温柔少女心 2024-10-16 19:17:29

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

回复收藏 0 原文

蝶…霜飞 2024-10-16 19:17:29

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

简单的一种：您将省略选项卡的所有花哨标记，只保留内联 LI 中的内联链接，并将 display: block; 添加到您的 #tabs ul规则。没有浮动，菜单中没有块，只有纯内联文本。这会起作用，但不会有太多“风格化”。 astebin.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 这个老的“将其宽度向右移动一半，然后向左移动一半宽度”的技巧效果很好。但祝你好运，进一步设计它并保持跨浏览器兼容:]

If I got it right, you need horizontal centering of block of unknown width. I see two approaches:

Simple one: you will omit all the fancy markup of your tabs and preserve just inline links in inline LIs and add display: block; to your #tabs ul rule. No floating, no blocks within menu, just plain inline text. This will work, but will no be much 'styllable'. pastebin.me/58fe73dd82496444fd7e129fc5830b4b
Complex one: add extra wrap around your ul, so you'll got #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 This old "move it half parents width right and then it move half its own width left" trick works quite well. But good luck styling it further and keeping it cross-browser compatible :]

回复收藏 0 原文

~没有更多了~