简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

使用CSS居中浮动元素的方法介绍

高洛峰
Lepaskan： 2017-03-10 11:02:14
asal
1915 orang telah melayarinya

这篇文章主要介绍了使用CSS居中浮动元素的方法介绍,是CSS入门学习中的基础知识,需要的朋友可以参考下

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

 p{   
        width:500px;   
        height:300px;   
        margin:-150px 0 0 -250px;   
        position:absolute;   
        left:50%;   
        top:50%;   
        background-color:#000;   
}
Salin selepas log masuk


方法二

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

<!DOCTYPE html><html><head>   
    <title>Demo</title>   
    <meta charset="utf-8"/>   
    <style type="text/css">   
        .p{   
            position:relative;   
            left:50%;   
            float:left;   
        }   
        .c{   
            position:relative;   
            float:left;   
            rightright:50%;   
        }   
    </style></head><body>   
    <p class="p">   
        <h1 class="c">Test Float Element Center</h1>   
    </p>   
</body>   
</html>
Salin selepas log masuk


Atas ialah kandungan terperinci 使用CSS居中浮动元素的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css居中
sumber：php.cn
Artikel sebelumnya：CSS基础教程：CSS图文混排，图像签名，多图拼接和图片特效示例 Artikel seterusnya：将页脚固定在页面底部的CSS实战教程
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
Artikel terbaru oleh pengarang
Isu terkini
WordPress 6.0 (add_editor_style) tidak memuatkan style.css dalam editor Gutenberg Saya mengikuti kursus UdemyWordPress untuk mencipta tema blok WordPress tersuai. Saya berj...
daripada 2023-11-12 20:37:50
0
2
261
Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS? Hai semua, baru-baru ini saya menghadapi masalah. Saya cuba untuk menetapkan latar belakan...
daripada 2023-11-06 13:59:13
0
1
240
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Tingkah laku yang tidak dijangka (pepijat butang putih) apabila menggunakan Tailwind dan MUI dalam projek NextJS Saya sedang membina projek menggunakan NextJS, TailwindCSS dan perpustakaan MUIReactUI. Se...
daripada 2023-11-04 11:04:23
0
1
178
Vite + Vue3 dalam Electron: Cara mengimport dan menggunakan ikon Reka Bentuk Bahan @mdi/font (atau mana-mana fon ikon lain) Saya ingin menggabungkan ikon @mdi/fon ke dalam apl saya (ia adalah apl Elektron). Saya me...
daripada 2023-11-02 18:43:57
0
1
179
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！