Question

我是CSS的新手，我还没有解决我想要实现的目标。

无论显示器分辨率如何，我都希望水平菜单的项目居中。这是我的代码：

HTML语义：

<body>
    <div class="inicio_m"></div>
        <div id="menu">
            <div id="cab_menu" class="clearfix">
                <div class="conteudo_menu clearfix">
                    <a href="#1">Item 1</a>
                    <a href="#2">Item 2</a>
                    <a href="#3">Item 3</a>
                    <a href="#4">Item 4</a>
                </div>
             </div>
          </div>
</body>

这是CSS格式：

html, body {
        height: 100%;
        width: 100%;
    }

#menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background: #000000;
    }

#cab_menu {
        width: 100%;
        position: relative;
    }
#cab_menu a {
        padding: 20px 10px;
        float: left;
        color: #FFFF40;
    }

.clearfix { display: block; }

.conteudo_menu {
        width: 100%;
        margin: 0 auto;
}

我在小提琴上贴了一张更方便的支票： http://jsfiddle.net/nQXd7/

提前致谢

Answer 1

删除浮动并改用display:inline-block。然后将text-align:center添加到包装元素。

JSFiddle

<强> CSS

html, body {
    height: 100%;
    width: 100%;
}
#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #000000;
}
#cab_menu {
    width: 100%;
    position: relative;
}
#cab_menu a {
    font-size: 12px;
    font-weight: bold;
    padding: 20px 10px;
    display: inline-block;
    color: #FFFF40;
}
.clearfix {
    display: block;
}
.conteudo_menu {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

Answer 2

请删除css中不需要的代码，尝试使用此代码以使菜单只是居中。

html, body {
height: 100%;
width: 100%;
}

#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}

.conteudo_menu {
    text-align: center;
}

    #cab_menu a {
        padding: 20px 10px;
        color: #FFFF40;
        display: inline-block;
    }

标题菜单中的项目居中 - CSS

2 个答案: