How to center the object of left in float

This article is about how to make the object of float:left centered. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

When we do nav, we usually use float:left;, but if we do this, it's a real hassle to center the navigation text horizontally.

The analysis is as follows:

[float:left] has a great thing: it adapts the width of div (or other tags) to its content, but it has one drawback: it can't be centered.

[display:inline-block] has the same feature and can be centered, but spaces appear between several such things in succession.

To solve this problem, we can combine the two:

[browser participating in the test: IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2]

[operating system: Windows]

The code is as follows:

Inline-block solves the problem that float:left objects cannot be centered. * {margin:0; padding:0; list-style:none;} body {text-align:center;} li {float:left; font-size:12px;} a {float:left; border:1px solid # 000; padding:5px 10px; text-decoration:none; color:#000;} ul {display:inline-block; * display:inline; zoom:1 On the home page, contact us about the product. The above is how to center the object of float:left. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.