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浮動居中效果如下：

css中如何設定float浮動居中？

#關於上述程式碼中我們會看到一個*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>

居中效果如下：

css中如何設定float浮動居中？

以上是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