Home > Article > Web Front-end > How to set float center in css?
In the float attribute of CSS, float:right floats to the right and float:left floats to the left, but the centered attribute is not set. So what should we do if we want to center the float attribute? This article will introduce to you how to center the float attribute in CSS.
We often use floating centering when making navigation bars. Below we will use the floating centering of navigation bars to introduce to you the float centering method in CSS. (Related recommendation: How to use the float attribute of css?)
How to center float in css: Use display:inline-block and float:left
Let’s look at the specific float centering example code:
The effect of float centering is as follows:
Regarding the above code, we will see a *display:inline;, which is actually a CSS hack writing method; (if you don’t know the CSS hack writing method, you can search it on Baidu yourself) *{margin: 0;padding: 0;} is a common "reset" style in the past, which means to stick all the elements in the web page tightly together. Because different browsers will produce different default element styles, so *{ margin: 0; padding: 0;} The main purpose is to help you reset the default styles of different browsers, so that the results of different browsers displaying web pages will not be too different.
After reading the above methods, you may sometimes not think of using CSS hack to write, and the compatibility is not good,
So let’s take a look at the implementation method without using *display:inline;
How to set float centering code example in css (without using *display:inline;):
The centering effect is as follows:
The above is the detailed content of How to set float center in css?. For more information, please follow other related articles on the PHP Chinese website!