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

fit-content实现元素水平居中

php中世界最好的语言
Lepaskan： 2018-03-21 13:18:38
asal
1851 orang telah melayarinya

这次给大家带来fit-content实现元素水平居中，fit-content实现元素水平居中的注意事项有哪些，下面就是实战案例，一起来看一下。

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有？那么今天给大家介绍一个fit-content属性，不知道有没有同学用过，如果用过那么你可以略过这篇文章，没用过的同学就继续了，我也是第一次看到这个属性，之前不知道这个属性更不用说使用了，原来这个CSS属性是用来水平居中的，fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。
 

在不设置宽度，并且元素中含用float:left情况下居中,先看一段代码:

如此这个导航是不会居中的，当我们通过设置fit-content加上margin来做到居中。

目前这个属性只支持Chrome和Firefox浏览器，下面是居中的代码:

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

完全利用CSS实现元素居中

font-size-adjust属性如何优化网页排版

Atas ialah kandungan terperinci fit-content实现元素水平居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
fit-content pusat tahap
sumber：php.cn
Artikel sebelumnya：CSS生成常用的图标样式 Artikel seterusnya：用calc()实现响应式布局
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
Di manakah saya harus mula menjadikan halaman ini responsif? <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...
daripada 2024-04-04 21:21:25
0
1
457
Tutorial PHP: Bagaimana untuk memuat naik teks dan imej ke Linkedin menggunakan PHP? Saya cuba memuat naik teks, imej dan pautan menggunakan LinkedinsRestAPI (https://learn.mi...
daripada 2024-04-03 18:42:29
0
1
420
Mengapa peluncur Jquery saya tidak dipaparkan dengan betul? Saya cuba melaksanakan perpustakaan SlickSlider dalam tema tersuai WordPress saya untuk me...
daripada 2024-04-03 10:43:26
0
1
397
Bagaimana untuk mendapatkan nilai input melalui acara onblur? Saya cuba mendapatkan input nilai melalui acara onblur tetapi ia tidak berfungsi apabila s...
daripada 2024-04-03 08:55:32
0
1
360
Mendapatkan lajur jadual untuk disusun pada paparan mudah alih ialah matlamat saya Saya mempunyai 5 lajur dan saya menjadikannya sebagai jadual kerana itu cara paling mudah ...
daripada 2024-04-02 20:50:17
0
1
274
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！