Maison > interface Web > tutoriel CSS > le corps du texte

Voici quelques titres basés sur des questions qui correspondent à votre article : * Pourquoi mon Iframe ne se centre-t-il pas horizontalement dans une division ? * Comment centrer une Iframe dans une Div : une solution simple * Centrage d'un Iframe Hori

Susan Sarandon
Libérer: 2024-10-27 18:30:30
original
339 Les gens l'ont consulté

Here are a few question-based titles that fit your article:

* Why Doesn't My Iframe Center Horizontally in a Div?
* How to Center an Iframe Within a Div: A Simple Solution
* Centering an Iframe Horizontally: The

Comment centrer horizontalement une Iframe dans une Div

Introduction :

Centrer une iframe horizontalement dans un div peut être un défi de mise en page CSS courant. Dans cet article, nous explorerons le problème et proposerons une solution pour parvenir à cet alignement.

Le problème :

Comme illustré dans l'exemple de code, une iframe peut n'apparaît pas centré horizontalement malgré sa largeur définie et sa "marge: 0 auto;". En effet, les iframes sont intrinsèquement des éléments en ligne et ne se comportent donc pas de la même manière que les conteneurs div.

Solution :

Pour centrer l'iframe, nous devons modifier sa propriété d'affichage pour "bloquer". Cela fait que l'iframe se comporte comme un élément de niveau bloc, permettant le "margin: 0 auto;" propriété pour prendre effet et répartir les marges uniformément.

Exemple de code :

Le code CSS modifié ci-dessous centrera l'iframe horizontalement :

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>
Copier après la connexion

En ajoutant "display: block;" au CSS iframe, l'iframe s'alignera désormais horizontalement au centre de son conteneur div parent.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!