STARIKOVS

It’s a real headache to center a fluid block element horizontally with help of CSS. Some time ago I figured out how to center CodeCharge Studio’s CSS Menu because it doesn’t provide this functionality. In general, any block element without the fixed width can be centered with help of this method.

By the way, if You have a fixed width block then You have to set its left and right margins to auto and You get the block centered.

In this article I’m going to explain the method I use to center a fluid block element. Here is the Demo.

With help of this method You can center:

• CodeCharge Studio’s Menu (CCS Menu)
• Horizontal CSS Menu
• Any block elements (DIV, SPAN, IMG, UL, etc.)

HTML

<div class="MenuStyle" id="Menu1Container">
  <ul class="adxm {Menu1:MenuType} level1">
  ...
  </ul>
</div>

CSS

#Menu1Container {
        position: relative;
        float: right;
        right: 50%;
}
#Menu1Container ul {
        position: relative;
        float: left;
        left: 50%;
}

Links

CodeCharge Studio’s web site

One Response to “Centering horizontal CSS menu”