本文为大家介绍了图片在div中居中的四种方法,希望对大家有所帮助。
方法一:
(推荐教程:css视频教程)
html:
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; }
方法二:
html
Nach dem Login kopierencss
.title { display: flex; justify-content: center; align-items: center; } .title img { width: 35%; }//该方法有些旧系统不支持Nach dem Login kopieren方法三:
html
第三种方法Nach dem Login kopierencss
.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 kopierencss
.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!
Erklärung dieser WebsiteDer 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.cnNeueste Artikel des Autors
2024-08-26 10:40:34 2024-08-26 10:40:33 2024-08-26 10:40:23 2024-08-26 10:40:20 2024-08-26 10:40:00 2024-08-26 10:39:20 2024-08-26 10:38:48 2024-08-26 10:38:31 2024-08-26 10:34:14 2024-08-26 10:34:10Aktuelle Ausgaben