Comment afficher les images au centre en HTML5

Méthode de centrage de l'image : 1. Utilisez "margin:0 auto" pour obtenir un centrage horizontal ; 2. Utilisez "text-align:center" pour obtenir un centrage horizontal ; 3. Utilisez la hauteur de ligne pour obtenir un centrage vertical ; pour obtenir un centrage vertical ;5. Utilisez la position pour obtenir un centrage vertical.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

1. Tout d'abord, jetons un coup d'œil à la méthode de centrage horizontal des images CSS

1. Utilisez margin:0 auto pour obtenir le centrage horizontal des imagesmargin: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>

二、我们来看看css图片垂直居中的实现方法

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、利用position

Code de centrage horizontal des images HTML :

<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>

2. Utilisez l'attribut de centrage horizontal du texte text-align:center pour obtenir un centrage horizontal des images

Code de centrage horizontal de l'image HTML :

rrreee 2. Jetons un coup d'œil à comment implémenter le centrage vertical des images CSS

🎜1. Utilisez line-height pour obtenir le centrage vertical de l'image 🎜🎜🎜Le code pour le centrage vertical de l'image html est le suivant : 🎜rrreee🎜 🎜Remarque : 🎜Cette méthode doit indiquer la hauteur avant de pouvoir être utilisée. 🎜🎜🎜2. Utilisez table pour réaliser le centrage vertical des images 🎜🎜🎜Le code pour le centrage vertical des images html est le suivant : 🎜rrreee🎜🎜Remarque : 🎜Cette méthode utilise la propriété de centrage vertical de table🎜🎜🎜Explication :🎜Ici, nous utilisons display:table; et display:table-cell; pour simuler table. compatible avec IE6/IE7. IE67 ne prend pas en charge display:table. Si vous n'avez pas besoin de prendre en charge IE67, vous pouvez utiliser 🎜🎜Cette méthode présente un inconvénient : lorsque vous définissez display : table ; cela peut modifier votre mise en page d'origine🎜🎜🎜3. Utilisez position pour obtenir le centrage vertical de l'image🎜🎜🎜Le code pour le centrage vertical de l'image html est le suivant :🎜 rrreee🎜🎜Instructions :🎜Si la largeur et la hauteur de l'image sont connues, vous pouvez utiliser cette méthode. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo HTML5🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!