Bildzentrierungsmethode: 1. Verwenden Sie „margin:0 auto“, um eine horizontale Zentrierung zu erreichen. 2. Verwenden Sie „text-align:center“, um eine horizontale Zentrierung zu erreichen. 3. Verwenden Sie „line-height“, um eine vertikale Zentrierung zu erreichen um eine vertikale Zentrierung zu erreichen ;5. Verwenden Sie die Position, um eine vertikale Zentrierung zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Verwenden Sie margin:0 auto, um eine horizontale Zentrierung von Bildern zu erreichen. margin:0 auto实现图片水平居中
html图片水平居中代码：
<div style="text-align:center;width:500px;border:greensolid1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin:0 auto;"/> </div>
2、利用文本的水平居中属性text-align:center实现图片水平居中
html图片水平居中代码：
<div> <div style="text-align:center;width:500px;border:greensolid1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display:inline-block;"/> </div>
1、利用line-height实现图片垂直居中
html图片垂直居中代码如下：
<div style="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display:inline-block;vertical-align:middle;"/> </div>
注意：此种方法需要注明高度才可以使用。
2、利用table实现图片垂直居中
html图片垂直居中代码如下：
<div style="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;"> <span style="display:table-cell;vertical-align:middle;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display:inline-block;"/> </span> </div>
注意：此种方法是利用了table的垂直居中属性
说明：这里使用display:table;和display:table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display:table，如果你不需要支持IE67那就可以用
这种方法有一个缺点：当你设置了display:table;可能会改变你的原有布局
3、利用 1. Verwenden Sie Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in HTML5 in der Mitte an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!position 2. Verwenden Sie das horizontale Zentrierattribut von Text <div style="width:500px;height:200px;position:relative;border:greensolid1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width:120px;height:40px;position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-20px;"/>
</div>
Nach dem Login kopierentext-align:center, um eine horizontale Zentrierung von Bildern zu erreichen So implementieren Sie die vertikale Zentrierung von CSS-Bildernline-height, um eine vertikale Zentrierung des Bildes zu erreichen table, um eine vertikale Zentrierung von Bildern zu erreichen. 🎜🎜🎜Der Code für die vertikale Zentrierung von HTML-Bildern lautet wie folgt: 🎜rrreee🎜🎜Hinweis: 🎜Diese Methode verwendet die vertikale Zentrierungseigenschaft von Tabelle🎜🎜🎜Erklärung:🎜Hier verwenden wir display:table; und display:table-cell;, um table zu simulieren kompatibel mit IE6/IE7. IE67 unterstützt nicht display:table. Wenn Sie IE67 nicht unterstützen müssen, können Sie 🎜🎜Diese Methode hat einen Nachteil: Wenn Sie display festlegen: Tabelle; es kann Ihr ursprüngliches Layout ändern🎜🎜🎜3. Verwenden Sie position, um eine vertikale Zentrierung des Bildes zu erreichen🎜🎜🎜Der vertikale Zentrierungscode des HTML-Bildes lautet wie folgt:🎜rrreee🎜🎜 Anleitung:🎜Wenn Breite und Höhe des Bildes bekannt sind, können Sie diese Methode verwenden. 🎜🎜Empfohlenes Lernen: 🎜HTML5-Video-Tutorial🎜🎜
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
