如何使float列表居中排列

原文： http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/

 

Question: "When is a float not a float?"
Answer: "When it doesn't float to the left or right."

Today's modern web designs are utilizing CSS for page layout. One popular CSS property used for page layout is float. The float property causes an element to float against the left or right margin of its parent element. But an often-sited drawback of using floats is that there is no easy way to center them. Most people settle by using a fixed width wrapper that contains the float (or floats). The width of the wrapper must match the float(s) total width and then the wrapper can simply be centered using auto margins. This will effectively center the floated elements as they are now contained within the wrapper. The drawback of this method is that you will need to know the width of the floated content beforehand.

In this article we will describe how you can center a widthless float or a series of widthless floats with relative ease.

 

Floated Buttons

A common task for a designer is setting up a horizontal navigation menu. There are a number of ways that horizontal menus can be constructed and all have their advantages and disadvantages depending on the situation in hand. The easiest solution is simply to use a list for the menu and set the list element to display:inline so that the menu lines up horizontally across the page.

If the menu is purely text then you can have the menu centered simply by setting the ul to text-align:center causing the inline list elements to be nicely centered on your page. This is fine for simple menus, but if you want the text styled as buttons with padding, shading and various borders, then inline elements are not ideal for this type of styling and the results can be unstable across browsers.

In cases where the menu items have complicated styles applied to them the best option is float the list element instead. This means that the anchor can also be made display:block (or floated also) and this enables the elements to be styled consistently with padding borders and heights if necessary.

First we will need some code to work with -- here is some that I prepared earlier:

PLAIN TEXT

CSS:

1. html,body {
2. margin: 0;
3. padding :30px 10px;
4. text-align: center;
5. }
6. #outer {
7. width:780px;
8. margin: auto;
9. text-align: left;
10. border :1px solid #000;
11. padding:5px;
12. }
13. .navwrap ul {
14. list-style: none;
15. margin: 0;
16. padding: 0;
17. }
18. .navwrap li {
19. border :1px solid #eff2df;
20. float: left;
21. margin :0 10px 0 0;
22. background:#809900;
23. }
24. .navwrap li a {
25. float: left;
26. border :1px solid #4c7300;
27. position: relative;
28. left:-2px;
29. top:-2px;
30. background:#eff2df;
31. color:#4c7300;
32. text-decoration: none;
33. padding :6px 10px;
34. font-weight: bold;
35. }
36. .navwrap li a:hover {
37. background:#809900;
38. color:#fff;
39. }
40. .clearer {
41. height:1px;
42. overflow: hidden;
43. margin-top:-1px;
44. clear: both;
45. }

 

PLAIN TEXT

HTML:

1. <div id="outer">
2.   <div class="navwrap">
3.   <ul>
4.     <li> <a href="#">Button 1 </a> </li>
5.     <li> <a href="#">Button 2's a bit longer </a> </li>
6.     <li> <a href="#">This is Button 3 </a> </li>
7.   </ul>
8.   </div>
9.   <div class="clearer"> </div>
10. </div>

 

(Note: The extra div used for .navwrap isn't necessary for this example, but I have included it to make the examples which follow easier to understand. The above example could have been done without using the extra div by applying the styling directly to the ul instead.)

The drawback of floating the list element is that the menu now aligns to the left of the page (or right depending on the value used), as can be seen in Figure 1 which is produced by running the above code:

Figure 1

Now in order to center the floated menu you would typically wrap the menu in another static div and apply a fixed width as well as set margins to auto. But this presents a small problem in that in the above example the menu items have no widths defined and therefore the total width of our menu is unknown. We could of course set widths for each menu item but it would then be necessary to add classes to each individual menu item, which is a bit of a pain to do and will also restrict the menu to always being that same size. If we wanted different (or dynamic) menu items on various pages then we would have to keep changing the classes for every instance which would quickly become unmanageable or even impossible for dynamic data.

Therefore it would be best if there was a way to center the menu that didn't involve setting any specific widths anywhere!

It's All Relative

Once again we find ourselves calling on our old friend -- Relative Positioning.

The premise is simple -- it basically just involves a widthless float that is placed 50% from the left using position:relative. The nested inner element is then reversed and a negative relative position of 50% (-50%) is applied. This has the effect of placing the element in the center. Recall that relative positioning maintains the flow of the document and allows other content to flow underneath quite normally.

The basic section of (stripped down) code is as follows:

PLAIN TEXT

CSS:

1. .navwrap {
2. float: left;
3. position: relative;
4. left: 50%;
5. }
6. .navwrap ul {
7. position: relative;
8. left:- 50%;
9. }

 

Unfortunately IE needs a helping hand and requires the inner element to be floated as well. This can be achieved by including an IE-only style using conditional comments.

PLAIN TEXT

HTML:

1. <!--[if IE ]>-->
2. .navwrap ul{float:left;}
3. <![endif]-->

 

If you look at Figure 2 you will see the effect that this has had on our layout.

Figure 2

The menu is now centered nicely, but what I haven't shown is that the browser now shows a horizontal scrollbar (in some browsers). The reason for this is that the relative positioning moved the element outside the confines of the window and although we subsequently dragged it back into view the browser still thinks it is off-screen somewhere.

To combat this effect we can simply add overflow:hidden on a parent div which will kill the horizontal scrollbar. You can use any parent, but you may be better advised to specifically add an extra element to do this rather than utilising the page wrapper (as in my example) as you may not want to hide the overflow on that.

The full CSS and HTML can be found in this live example.

Here is a screenshot of the above link showing various sized menus:

Figure 3

Drawbacks

The drawbacks to this method are mainly the extra non-semantic div wrapper that is needed to accomplish this effect and also the overflow:hidden that is needed on a parent element. Otherwise the method works well across modern browsers although, as I always say, make sure you check in the browsers you want to support before using any advanced methods like this.

Other solutions

There is in fact another way of centering elements like this and that involves using display:table for Opera and Mozilla browsers and using display:inline-block for IE. This new method has one small advantage over the floated method in that in a fluid width environment the menu can wrap and the wrapping item also becomes centered. This is unlike the float version above where a wrapping element would align to the left of the centered menu.

However, you will have to wait until part 2 of the article to see how this can be done, but meanwhile you can have fun with your floats.