Center a menu with left align items

0
votes

I need to design a menu, in which the menu is always centered, with variable number of items, browser resolutions, and the items would be aligned to the left (menu centered in the page, but items aligned to the left).

(As you can see it is not centered at all).

This is my code:

<html>
<head>

<style type="text/css">

.extPanel{
 background-color:#555;
 padding: 0px 20% 0px 20%;
 display: table;
}

.split{
    clear: both;
}

.menuElement{
 float:left;
 background-color:#aaa;
 margin: 0px 20px 20px 0px;
 width: 200px;
 height: 200px;
 text-align: center;
}

</style>

</head>
<body>

<div class="extPanel">

    <div class="menuElement">item1</div>
    <div class="menuElement">item2</div>
    <div class="menuElement">item3</div>
    <div class="menuElement">item4</div>

    <div class="split"></div>
    External Panel. 20% left and right padding.
</div>

</body>
</html>

As you can see, the external div has 20% padding in order to center the items. Items float to the left. Items are not centered at all because a remaining space exists in which item4 doesn't have enough space, so it floats to the next line.

And if the menu would have only one menu item, this item float to left so is more obvious that the menu is not centered. If I try to use some style to center all the items (text-align or something like this), item4 would appear centered below item2, and I need that the items are align to left.

I need:

  • Menu to be centered in the page, with any number of items
  • Items centered
  • Cross-browser compatibility (to IE8 at least, and mobile explorers)
  • No JavaScript
4
cssmenucenter

4 Answers

0
votes

Try using display: inline-block;.

You can add the following code: 

.extPanel {
    text-align: center;
}
.menuElement {
    display: inline-block;
    *display: inline; //ie
    zoom: 1; //ie
    //remove float: left;
}
0
votes

instead padding, you could simply use margin and inline-block for childs.

http://codepen.io/anon/pen/quByg

 .extPanel {
      margin:0 20%;
text-align:justify;
    }
    .menuElement {
      display:inline-block;
      width:200px;
      height:200px;
      margin:0 20px 20px 0;
      border:solid;
    }
0
votes

You want to set text-align: center; on the surrounding body. Then .extPanel needs a margin: 0 auto;

http://jsfiddle.net/markdelorey/ttZgZ/

0
votes

I found the solution by combining all your answers.

You can found it here: http://codepen.io/anon/pen/odhrp

I used diffent IE hack here: http://codepen.io/anon/pen/flEsm

As you can see, works with one element, two, three... When items menu don't fit in extPanel max width, items goes to next line, align to left, and menu is still centered.

.extPanel {  
   background-color:#555;
  text-align:center;
  display: table;   
  margin: auto;
  max-width: 80%;
  text-align: justify;
}
.menuElement {
  display:inline-block;
  width:200px;
  height:200px;
  margin:20px 20px 0;
  border:solid;
  text-align: center;
}

And text-justify: distribute solve the problem with text-align: justify in IE.