display: inline
Method With Centered Menu
This method uses the display: inline
declaration on the list item element so that they will all display side-by-side in a horizontal menu. The advantages to this method are that you will not have any collapsing containers, float drop, or float clears to deal with, and you can use the text-align: center
declaration in the unordered list to center your menu in the banner. We'll center the menu below, and leave this one aligned to the left, although you could certainly align to the right if desired.
The disadvantage is that inline display boxes can't be given set heights or widths, so image replacement doesn't work for them (image replacement is a lesson for next week).
This menu is using text-align to center the menu within the header.