css中如何设置float浮动居中？-css教程-PHP中文网

首页

web前端

css教程

css中如何设置float浮动居中？

不言

Oct 30, 2018 pm 02:05 PM

float

在css的float属性中有float:right向右浮动，float:left向左浮动，但是却没有设置居中的属性，那么如果我们想要实现float属性居中该怎么办呢？本篇文章就来给大家介绍有关于css中float属性居中的方法。

我们经常在做导航条的时候会用到浮动居中，下面我们就用实现导航条的浮动居中来给大家介绍css中float居中的方法。（相关推荐：css的float属性怎么用？）

css中float居中的方法：利用display:inline-block和float:left

我们来看具体的float浮动居中示例代码：

<!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>

float浮动居中效果如下：

2345截图20181030115038.png

关于上述代码中我们会看到一个*display:inline;，这个其实就是一种CSS hack写法；（不知道css hack写法的可以自己百度一下）*{margin: 0;padding: 0;}是以前常见的一种 "重置" 样式，把所有网页内的元素都紧紧贴在一起的意思，因为浏览器的不同会产生不同的默认元素样式，所以*{ margin: 0; padding: 0;} 主要用途就是帮助你重置不同的浏览器默认样式，以达到不同浏览器显示网页的结果不会差太远的效果。

看完了上述的方法，可能有时候会想不到用CSS hack写法，而且兼容性也不好，

所以下面我们看一下不使用*display:inline;的实现方法

css中如何设置float浮动居中代码示例(不使用*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>

居中效果如下：

2345截图20181030134402.png

以上是css中如何设置float浮动居中？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

float最大值为多少Oct 11, 2023 pm 05:54 PM

float最大值：1、在C语言中，float最大值是3.40282347e+38，根据IEEE 754标准，float类型的最大指数为127，尾数的位数为23，通过这种方式，最大浮点数为3.40282347e+38；2、在Java语言中，float最大值是3.4028235E+38；3、在Python语言中，float最大值是1.7976931348623157e+308。

float精度能到多少Oct 17, 2023 pm 03:13 PM

float精度能到6到9位小数。根据IEEE754标准，float类型可以表示的有效数字位数为大约6到9位。需要注意的是，这只是理论上的最大精度，实际使用中由于浮点数的舍入误差，float类型的精度往往会更低。在计算机中进行浮点数运算时，由于浮点数的精度限制，可能会出现精度损失的情况。为了提高浮点数的精度，可以使用更高精度的数据类型，如double或者long double。

c语言中float什么意思Oct 12, 2023 pm 02:30 PM

C语言中的float是一种数据类型，用于表示单精度浮点数，浮点数是一种用科学计数法表示的实数，可以表示非常大或非常小的数值。float类型的变量可以存储小数点后6位有效数字的数值，在C语言中，使用float类型可以进行浮点数的运算和存储，其变量可以用于表示小数、分数、科学计数法等需要精确表示的实数，与整数类型不同，浮点数可以表示小数点后的数字，并且可以进行小数的四则运算。

数据库float长度有哪些Oct 10, 2023 pm 03:57 PM

常见的数据库float长度有：1、MySQL中的float类型长度，可以是4个字节或8个字节；2、Oracle中的float类型长度，可以是4个字节或8个字节；3、SQL Server中的float类型长度，固定为8个字节；4、PostgreSQL中的float类型长度，可以是4个字节或8个字节等等。

float属性取值有哪些Oct 10, 2023 pm 02:03 PM

float属性取值有left、right、none、inherit、clearinline-start和inline-end。详细介绍：1、left，元素向左浮动，即元素会尽可能地靠近容器的左边，其他元素会围绕在其右侧；2、right，元素向右浮动，即元素会尽可能地靠近容器的右边，其他元素会围绕在其左侧；3、none默认值，元素不浮动，会按照正常的文档流排列等等。

float32字节包括哪些Oct 10, 2023 pm 04:07 PM

float32字节包括符号位、指数位和尾数位，用于表示32位浮点数。详细介绍：1、符号位（1位），用来表示数字的正负，0表示正数，1表示负数；2、指数位（8位），用来表示浮点数的指数部分，通过指数位，可以调整浮点数的大小范围；3、尾数位（23位），用来表示浮点数的尾数部分，尾数位存储了浮点数的小数部分。符号位决定了浮点数的正负，指数位和尾数位共同决定了浮点数的大小和精度。

float和double有什么区别Oct 11, 2023 pm 05:38 PM

float和double区别主要在于精度、存储和计算速度、范围以及在编程语言中的使用。详细介绍：1、精度不同，Float是单精度浮点数，占用4个字节（32位），而double是双精度浮点数，占用8个字节（64位）；2、存储和计算速度不同，double占用的空间更大，需要更多的存储空间来存储数值，在需要高性能和速度的应用程序中，使用float类型可能会更加高效；3、范围不同等等。

如何将string转换成floatOct 16, 2023 pm 02:03 PM

可以通过Python、JavaScript、Java、C#、Ruby和PHPstring转换成float。详细介绍：1、Python，输入float_number = float(string_number)；2、JavaScript，输入float_number = parseFloat(string_number);；3、Java等等。

See all articles