Comment centrer une image en html

Aligner vos images dans une position appropriée par rapport à d'autres contenus sur vos pages Web est très important. Cet alignement approprié définit et améliore la structure d'un site Web. Dans HTML, il existe différentes manières avec lesquelles vous pouvez centrer une image. Ces approches ont été discutées ici dans ce blog.

Comment centrer une image à l'aide de la propriété Text-Align

Aux fins de centrer une image en utilisant la propriété Text-Align Consultez l'exemple ci-dessous.

Html

Dans le code ci-dessus, nous fabriquons un conteneur div et plaçons notre image à l'intérieur de ce conteneur à l'aide de la balise. Cet attribut fournit un style en ligne à l'image. Ensuite, pour centrer l'image, nous utilisons l'attribut de style du conteneur Div pour définir la propriété Text-Align au centre. L'utilisation de cette propriété sur la balise n'aura aucun effet, vous devez donc envelopper l'image dans un conteneur et attribuer cette propriété à ce conteneur.

Sortir

C'est ainsi que vous centrez une image.

Comment centrer une image en utilisant des marges

Une autre façon d'attribuer à votre image une position centrée sur la marge et les propriétés de marge-gauche comme nous l'avons montré dans l'extrait de code ci-dessous.

Html

La sortie affiche une image centrée.

Conclusion

Afin de centrer une image en HTML, utilisez le alignement de texte propriété ou le marge à droite et marge-gauche propriété. Lorsque vous utilisez la propriété texte-alignement enveloppez l'image à l'intérieur d'un conteneur div, puis à l'aide de l'attribut de style, définissez la propriété texte-alignement du conteneur au centre, tandis que dans le cas de l'utilisation des propriétés de marge, définissez d'abord l'affichage de l'image à Bloquer puis affecter l'auto aux propriétés de marge droite et de marge à gauche.