溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中設(shè)置float浮動(dòng)居中的方法是什么

發(fā)布時(shí)間：2020-08-31 11:17:45 來源：億速云 閱讀：528 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css中設(shè)置float浮動(dòng)居中的方法是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

我們來看具體的float浮動(dòng)居中示例代碼：

<!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浮動(dòng)居中效果如下：

css中設(shè)置float浮動(dòng)居中的方法是什么

關(guān)于上述代碼中我們會(huì)看到一個(gè)*display:inline;，這個(gè)其實(shí)就是一種CSS hack寫法；（不知道css hack寫法的可以自己百度一下）*{margin: 0;padding: 0;}是以前常見的一種 "重置" 樣式，把所有網(wǎng)頁內(nèi)的元素都緊緊貼在一起的意思，因?yàn)闉g覽器的不同會(huì)產(chǎn)生不同的默認(rèn)元素樣式，所以*{ margin: 0; padding: 0;} 主要用途就是幫助你重置不同的瀏覽器默認(rèn)樣式，以達(dá)到不同瀏覽器顯示網(wǎng)頁的結(jié)果不會(huì)差太遠(yuǎn)的效果。

看完了上述的方法，可能有時(shí)候會(huì)想不到用CSS hack寫法，而且兼容性也不好，

所以下面我們看一下不使用*display:inline;的實(shí)現(xiàn)方法

css中如何設(shè)置float浮動(dòng)居中代碼示例(不使用*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中設(shè)置float浮動(dòng)居中的方法是什么

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中設(shè)置float浮動(dòng)居中的方法是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手