How to set float center in css?-CSS Tutorial-php.cn

How to set float center in css?

不言

Release： 2018-10-30 14:06:52

Original

26186 people have browsed it

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:

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8" />
        <title></title>
        <style type="text/css">
            * {
             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;
         }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">视频</a></li>
            <li><a href="#nogo">文章</a></li>
            <li><a href="#nogo">登录</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

Copy after login

The effect of float centering is as follows:

How to set float center in css?

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;):

<!DOCTYPE html>
 <html>
    <head>
        <meta charset=utf-8" />
        <title></title>
        <style type="text/css">
     * {
    padding: 0px;
    margin: 0px;
}
.xlk-nav {
    width: 100%;
    height: 40px;
    text-align: center;
        background-color: lightblue;
}
.xlk-menu {
    height: 100%;
    float: left;
    line-height: 40px;
    padding: 0 20px;
    margin-right: 20px;
    background-color: pink;
    
}
        </style>
    </head>
    <body>
     <div class="xlk-nav">
        <div style="display: inline-block;">
            <div class="xlk-menu">首页</div>
            <div class="xlk-menu">视频</div>
            <div class="xlk-menu">文章</div>
            <div class="xlk-menu">登录</div>
            <div class="xlk-menu">留言</div>
        </div>
    </div>
    </body>
 </html>

Copy after login

The centering effect is as follows:

How to set float center in css?

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!