Center Align a UL Menu

Antonio — Fri, 19 Feb 2010 19:08:22 +0000

The task of center-aligning an unordered list (which can’t have its width explicitly set) via CSS comes up every now and then. Logging it here for later.

“For a start you could text-align: center the ul inside the #ul_container_div and display: inline the li instead of floating them left.”

#ul_container_div{ width:100%; text-align:center; }
#ul_container_div li { display: inline;  }

Source of knowledge: http://archivist.incutio.com/viewlist/css-discuss/59041

CSS Neatness Technique

Antonio — Sun, 04 Jan 2009 20:39:30 +0000

We’ve all seen long and unmanageable CSS files, sometimes hundreds or even thousands of lines long. Finding the exact declaration you’re looking for can be a royal pain in the arse. It’s worse when style declarations for a particular element can be found more than once in a file, such as when the coder wants to separate structural styling from say typography styling.

The technique is simply to:

“Indent the CSS code in the same way corresponding elements are structurally indented in the HTML.”

“How amazing”, I thought, as the idea of indenting CSS declarations never occurred to me. And yes, please keep structural and typography styling together in the same declaration.

I haven’t coded anything using this method yet (I only learnt of it today!), but I think it will make my CSS coding exponentially more manageable. If you have your own special way of organizing CSS files, do tell. I’m sure we’d all like to hear it. For now, indenting seems to be the way to go.

Image credit: http://www.dryicons.com

Solution Log | Antonio David - NVNCBL » css

Center Align a UL Menu

CSS Neatness Technique