css - 将我的导航菜单链接居中

标签 css navigation centering alignment

我似乎无法弄清楚这一点。我试过 text-align: center; , display: inline-block 等等,但我只是想不出如何在#menu-bottom-nav 中将我的导航居中。

CSS

#menu-bottom-nav { width: 600px; height: 70px; margin: 0px auto;}
#menu-bottom-nav li { list-style-type: none; float: left; margin-right: 20px;}

感谢任何帮助。

enter image description here

最佳答案

试试这个:

<!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <style type="text/css">
        #menu-bottom-nav {
            margin: 0;
            padding: 0;
            width: 600px;
            text-align: center;
            border: 1px solid #000;
        }

        #menu-bottom-nav li {
            list-style-type: none;
            margin-right: 20px;
            border: 1px solid #ff0000;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }
    </style>
</head>
<body>
    <ul id="menu-bottom-nav">
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
</body>
</html>

关于css - 将我的导航菜单链接居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10938176/

相关文章:

Jquery slideToggle 关闭事件在打开后立即触发

javascript - 2 种颜色的 HTML 输入文本

javascript - 如何在网站的所有页面中使用 NavBar 而不会弄乱链接

html - 根据当前窗口大小将图像垂直和水平居中

jquery - 如何让 3 个 div 重叠以允许点击触发所有底层 div 的事件处理程序?

javascript - z-index 未按预期工作

css - 菜单和链接在左侧重叠

ios - 在 iOS 14 上的 SwiftUI 中显示两次 View

css - 响应式地垂直和水平居中文本

html - 即使溢出容器也能保持元素居中