Comment centrer un iframe horizontalement? - Html

Un iframe, également connu sous le nom de cadre en ligne dans HTML, est un cadre intégré dans une interface qui ressemble à un autre écran ou interface sur un document HTML. Dans HTML, il y a une balise iframe à travers laquelle les iframes sont créés. Lorsque le nom iframe est créé, il est, par défaut, affiché sur le côté gauche de l'écran, mais il peut être déplacé et placé sur l'interface n'importe où en utilisant les propriétés de style CSS. Pour centrer le cadre en ligne horizontalement, les propriétés de marge automatique et de bloc d'affichage sont utilisées.

Comprenons cela avec un exemple simple.

Créer un iframe

Discutons d'un exemple qui crée un iframe simple via la balise iframe:

Le code ci-dessus contient «iframe» contenant un lien vers la page Web.

Créer un simple iframe sans aucune propriété CSS appliquée à elle affichera les résultats suivants dans l'interface de sortie. L'IFRAME sera créé mais sera affiché sur le côté gauche par défaut:

Appliquer les propriétés CSS pour centrer le iframe

Pour déplacer l'iframe vers le centre, nous devons appliquer les propriétés CSS dessus. Dans l'élément de style CSS, nous devons simplement nous référer d'abord à l'IFRAME, puis ajouter la propriété de marge automatique et d'affichage:

iframe
marge: auto;
bloc de visualisation;

Dans l'extrait de code ci-dessus, il y a un sélecteur ajouté pour se référer à l'IFRAME, et à l'intérieur du sélecteur, il y a la marge automatique et les propriétés du bloc d'affichage qui déplaceront l'iframe dans le centre horizontalement.

Ce qui suit sera l'interface de sortie après avoir appliqué les propriétés:

Cela résume la façon dont l'IFRAME peut être aligné sur le centre horizontalement.

Conclusion

L'IFRAME dans HTML peut être centré horizontalement sur une interface de page Web en ajoutant le sélecteur dans l'élément de style CSS faisant référence à l'IFRAME et ensuite en ajoutant simplement les propriétés de marge CSS Auto et d'affichage pour cette iframe. Cela placera le cadre en ligne au centre. Cet article explique bien comment centrer l'iframe horizontalement.