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

CSS3中使用fit-content实现水平居中方法介绍

巴扎黑
Lepaskan： 2017-09-09 14:32:18
asal
1717 orang telah melayarinya

今天通过本文给大家介绍一个fit-content属性的相关知识，CSS属性是用来水平居中的，fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧

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

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

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

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

Atas ialah kandungan terperinci CSS3中使用fit-content实现水平居中方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3 fit-content
sumber：php.cn
Artikel sebelumnya：用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
Panggilan ke undefined function create_function() Saya mendapat mesej ini di halaman utama tapak web: Ralat maut: Ralat tidak ditangkap: mem...
daripada 2023-11-16 19:00:36
0
1
277
Muat turun pdf dari API Laravel melalui Axios dalam VueJS 3 Helo, saya mempunyai bahagian hadapan VUEJS3 dan bahagian belakang Laravel8. Saya akan mem...
daripada 2023-11-16 12:48:50
0
2
301
v-date-picker untuk memilih bulan dan tahun sahaja Sila beritahu saya jika ada cara lain untuk melakukan ini menggunakan v-date-picker. Saya ...
daripada 2023-11-10 14:05:05
0
1
269
Div menangkap skrol tetikus Pada masa ini saya mempunyai halaman dalam bentuk
daripada 2023-11-01 18:57:05
0
2
268
getServerSideProps() tidak dipanggil nextJS 13 Cuba membiasakan diri dengan nextJS13. Apa yang saya temui ialah fungsi getServerSideProps...
daripada 2023-10-31 15:38:58
0
2
223
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！