Rumah hujung hadapan web tutorial css css中如何设置float浮动居中?

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-blockfloat: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>
Salin selepas log masuk

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>
Salin selepas log masuk

居中效果如下:

2345截图20181030134402.png


Atas ialah kandungan terperinci css中如何设置float浮动居中?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1660
14
Tutorial PHP
1261
29
Tutorial C#
1234
24
Apakah nilai maksimum terapung? Apakah nilai maksimum terapung? Oct 11, 2023 pm 05:54 PM

Nilai maksimum apungan: 1. Dalam bahasa C, nilai maksimum apungan ialah 3.40282347e+38 Menurut piawaian IEEE 754, eksponen maksimum jenis apungan ialah 127, dan bilangan digit mantissa ialah 23. Dengan cara ini, nombor titik terapung maksimum ialah 3.40282347 e+38. Dalam bahasa Java, nilai apungan maksimum ialah 3.4028235E+38. Dalam bahasa Python, nilai apungan maksimum ialah 1.7976931348623157e+308;

Apakah yang termasuk float32 bait? Apakah yang termasuk float32 bait? Oct 10, 2023 pm 04:07 PM

Bait float32 termasuk bit tanda, bit eksponen dan bit mantissa, dan digunakan untuk mewakili nombor titik terapung 32-bit. Pengenalan terperinci: 1. Bit tanda (1 bit), digunakan untuk mewakili tanda nombor, 0 mewakili nombor positif, 1 mewakili nombor negatif 2. Bit eksponen (8 bit), digunakan untuk mewakili bahagian eksponen a nombor titik terapung, melalui bit eksponen , anda boleh melaraskan julat saiz nombor titik terapung 3. Bit mantissa (23 bit) digunakan untuk mewakili bahagian mantissa nombor titik terapung, dan bit mantissa menyimpan; bahagian perpuluhan nombor titik terapung. Bit tanda menentukan tanda nombor titik terapung, dan bit eksponen dan bit mantissa bersama-sama menentukan saiz dan ketepatan nombor titik terapung.

Apakah ketepatan apungan? Apakah ketepatan apungan? Oct 17, 2023 pm 03:13 PM

Ketepatan apungan boleh mencapai 6 hingga 9 tempat perpuluhan. Menurut piawaian IEEE754, bilangan digit bererti yang boleh diwakili oleh jenis apungan adalah lebih kurang 6 hingga 9 digit. Perlu diingatkan bahawa ini hanyalah ketepatan maksimum teori Dalam penggunaan sebenar, disebabkan ralat pembundaran nombor titik terapung, ketepatan jenis apungan selalunya lebih rendah. Apabila melakukan operasi nombor titik terapung dalam komputer, kehilangan ketepatan mungkin berlaku disebabkan oleh had ketepatan nombor titik terapung. Untuk meningkatkan ketepatan nombor titik terapung, anda boleh menggunakan jenis data ketepatan yang lebih tinggi, seperti dua kali ganda atau panjang.

Apakah maksud float dalam bahasa C? Apakah maksud float dalam bahasa C? Oct 12, 2023 pm 02:30 PM

Terapung dalam bahasa C ialah jenis data yang digunakan untuk mewakili nombor titik terapung ketepatan tunggal Nombor titik terapung ialah nombor nyata yang diwakili dalam tatatanda saintifik dan boleh mewakili nilai yang sangat besar atau sangat kecil. Pembolehubah jenis apungan boleh menyimpan nilai dengan 6 digit bererti selepas titik perpuluhan Dalam bahasa C, jenis apungan boleh digunakan untuk mengendalikan dan menyimpan nombor titik apungan boleh digunakan untuk mewakili perpuluhan, pecahan, saintifik tatatanda, dsb. yang memerlukan perwakilan tepat, tidak seperti jenis integer, nombor titik terapung boleh mewakili nombor selepas titik perpuluhan, dan boleh melakukan empat operasi aritmetik pada perpuluhan.

Apakah panjang apungan pangkalan data? Apakah panjang apungan pangkalan data? Oct 10, 2023 pm 03:57 PM

Panjang apungan pangkalan data biasa ialah: 1. Panjang jenis apungan dalam MySQL boleh menjadi 4 bait atau 8 bait 2. Panjang jenis apungan dalam Oracle boleh 4 bait atau 8 bait. , Panjang jenis apungan dalam SQL Server ditetapkan pada 8 bait 4. Panjang jenis apungan dalam PostgreSQL boleh menjadi 4 bait atau 8 bait, dsb.

Apakah nilai atribut float? Apakah nilai atribut float? Oct 10, 2023 pm 02:03 PM

Nilai atribut apungan termasuk kiri, kanan, tiada, warisi, clearinline-start dan inline-end. Pengenalan terperinci: 1. kiri, elemen terapung ke kiri, iaitu, elemen akan berada sedekat mungkin dengan sebelah kiri bekas, dan elemen lain akan mengelilinginya di sebelah kanan 2. kanan, elemen terapung ke kanan, iaitu, elemen akan berada sedekat mungkin dengan bekas Di sebelah kanan, elemen lain akan mengelilinginya di sebelah kiri 3. Nilai lalai tiada, elemen tidak akan terapung, dan akan disusun mengikut aliran dokumen biasa, dsb.

Apakah masalah yang akan menyebabkan susun atur terapung? Apakah masalah yang akan menyebabkan susun atur terapung? Oct 10, 2023 pm 03:31 PM

Reka letak terapung boleh menyebabkan masalah seperti mengosongkan terapung, masalah pertindihan elemen, masalah pembalut teks dan masalah reka letak responsif. Pengenalan terperinci: 1. Kosongkan masalah terapung Apabila menggunakan susun atur terapung, elemen terapung akan terlepas daripada aliran dokumen, yang mungkin menyebabkan bekas induk tidak dapat membungkus elemen terapung dengan betul bekas induk akan runtuh, menyebabkan kekacauan reka letak;

Apakah maksud float=0? Apakah maksud float=0? Oct 13, 2023 pm 04:14 PM

float=0 ialah jenis pembolehubah dalam bahasa pengaturcaraan yang mewakili nombor titik terapung (iaitu, perpuluhan). float=0 bermaksud untuk menetapkan nilai awal pembolehubah titik terapung kepada 0. Nombor titik terapung digunakan secara meluas dalam pengaturcaraan komputer untuk mewakili dan memproses data pengukuran dunia sebenar. Dalam banyak bahasa pengaturcaraan, float ialah jenis data yang digunakan untuk menyimpan dan beroperasi pada nombor nyata Dalam jenis pembolehubah ini, nombor titik terapung diwakili sebagai urutan nombor sebelum dan selepas titik perpuluhan, dan boleh mengandungi titik perpuluhan. dan bahagian Indeks pilihan.

See all articles