css实现图片在div中居中的方法有哪些

王林
Freigeben: 2020-11-05 16:44:16
nach vorne
2935 Leute haben es durchsucht

css实现图片在div中居中的方法有哪些

本文为大家介绍了图片在div中居中的四种方法,希望对大家有所帮助。

方法一:

(推荐教程:css视频教程

html:

Nach dem Login kopieren

css

.title { width: 100%; font-size: 0; height: 10%; } .title .content img { width: 35%; } /*--主要的--*/ .content{ display: inline-block; vertical-align: middle; } .flag{ display: inline-block; vertical-align: middle; height: 100%; width: 0; }
Nach dem Login kopieren

方法二:

html

Nach dem Login kopieren

css

.title { display: flex; justify-content: center; align-items: center; } .title img { width: 35%; }//该方法有些旧系统不支持
Nach dem Login kopieren

方法三:

html

第三种方法
Nach dem Login kopieren

css

.title { height: 15%; font-size: 18px; position: relative; } .title span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Nach dem Login kopieren

方法四:

html

第四种方法
Nach dem Login kopieren

css

.title { width: 200px; height: 200px; vertical-align: middle; display: table-cell; text-align: center; }
Nach dem Login kopieren

相关推荐:CSS教程

Das obige ist der detaillierte Inhalt voncss实现图片在div中居中的方法有哪些. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!