html - CSS如何使水平菜单居中?

标签 html css web alignment center

我有这个问题 我无法将这个简单的 CSS Horizo​​ntam 菜单居中 你能帮我怎么做吗? 所以这是我的 CSS 代码

<style>
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>

这是我的html

</head>
<body bgcolor="gray">
<font face="calibri">

<center><img style="float:center" src="header.jpg" alt="" ></center>
<center>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">CONTACT US</a></li>
</center>

</ul>

谢谢你帮助我 我只是这里的新成员。 请回复谢谢

最佳答案

Fiddle

使用 text-align: center 并删除 ula 标签上的所有 float: left

ul {    
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    text-align: center;

}

关于html - CSS如何使水平菜单居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21964188/

相关文章:

html - 使用列表项的 CSS3 弹出导航

html - 如何摆脱 Bootstrap 模式中元素之间的额外空间?

css - 在 div 之前添加边距(视觉上)

javascript 文档就绪函数

javascript - 将值传递给自定义 HTMLElement 的构造函数

css - 两个相邻的 div 元素(用于页眉)

jquery - 当视频自定义控件搜索栏试图结束时,HTML5 视频结束事件未触发

javascript - Twitter-bootstrap 导航栏下拉菜单表现异常(不在移动设备上工作,不在桌面上显示)

python - flask 测试 : Test App Request?

android - 像 Android 布局一样工作的 CSS 框架?