Inline list menu with fixed width, bg image, and centered text

[joshg]

Is there any simple way to do this? Seems like I can get the fixed width / height to work pretty well using display: block, but if I try to use display: inline or display: inline-table I cannot get the fixed width/height to show properly!

Again what I am trying to do:

- Inline un-ordered list as menu with
- fixed width and height
- background image (essentially it looks like a "button" image)
- center text within the fixed width
- middle text within the fixed height (can probably use padding for this though..)

[Robin_reala]

Hi joshg and welcome to WebmasterWorld

Actually, what you're trying to do is fairly hard to get going cross-browser currently. Really what you want is display:inline-block, which would allow you to set a width and a height but yet also apply text-align:center to centre them. Normal inline display won't let you set a width or a height as per the specs because inline elements can break across multiple lines, which makes widths rather meaningless. The problem with inline-block is that it's not supports by Firefox currently (although will be in for Fx3.0).

Alternatively, if the background image is on the items (and not on the container) then you could float the list items left (which will allow you to set a width and a height on them, then use one of the shrink-wrapping methods in CSS to center the container. For example, display:table/margin:0 auto (in Firefox but not IE) or position:absolute/left:50%/margin-left:-50% should do the trick.