标题菜单中的居中项-CSS_Css

标题菜单中的居中项-CSS

css

标题菜单中的居中项-CSS,css,Css,我是CSS的新手，我还没有解决我想要达到的目标我希望水平菜单的项目居中，而不考虑显示器的分辨率。这是我的密码： HTML语义： <body> <div class="inicio_m"></div> <div id="menu"> <div id="cab_menu" class="clearfix"> <div class="conteudo_me

我是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>

为了更方便的检查，我在Fiddle上发布了：

提前感谢

移除浮动并使用

显示：内联块

。然后将

text align:center

添加到包装元素

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

移除浮动并改用

显示：内联块

。然后将

text align:center

添加到包装元素

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

请删除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中不需要的代码，尝试此代码以使菜单简单居中

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

谢谢你回答我的简单问题。谢谢你回答我的简单问题。