2

I am a novice in CSS and I have not yet solved what I am trying to achieve.

I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:

The HTML semantic:

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

This is the CSS format:

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

I posted on Fiddle for a more convenient check: http://jsfiddle.net/nQXd7/

Thanks in advance

user3348799
  • 43
  • 5
  • possible duplicate of [How I can center a menu bar with ul](http://stackoverflow.com/questions/22236080/how-i-can-center-a-menu-bar-with-ul) – Hashem Qolami Mar 18 '14 at 11:44

2 Answers2

2

Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.

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;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
2

Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.

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;
    }
emiljoseph
  • 73
  • 6