Skip to content

Instantly share code, notes, and snippets.

@weger

weger/HorizontallyCenteredMenus.html

Created November 28, 2014 12:31
Show Gist options
  • Save weger/b1241f854ef9a2c7504e to your computer and use it in GitHub Desktop.
Save weger/b1241f854ef9a2c7504e to your computer and use it in GitHub Desktop.
Download ZIP
无hack全浏览器支持的水平居中菜单
Raw
HorizontallyCenteredMenus.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Horizontally Centered Menus with no CSS hacks</title>
<meta content="origin:http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support" name="description">
<style type="text/css">
#centeredmenu {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background:#369;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
</style>
</head>
<body>
<div id="centeredmenu">
<ul>
<li><a href="#">Tab one</a></li>
<li><a href="#" class="active">Tab two</a></li>
<li><a href="#">Tab three</a></li>
<li><a href="#">Tab four</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment