Come allineare iframe sempre al centro

Ho un iframe circondato da elemento div, e sto semplicemente cercando di posizione è sempre al centro.
qui è il mio jsfiddle sforzo : jsfiddle

e veramente credere che qualcuno possa aiutare perchè sono sicuro che è qualcosa di molto semplice, ma non riesco proprio a vedere.

Qui è l’HTML stesso:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

OriginaleL’autore mathinvalidnik | 2013-12-14

6 risposte

  1. 24

    centro iframe

    una soluzione è:

    <div>
      <iframe></iframe>
    </div>

    css:

    div {
      text-align:center;
      width:100%;
    }
    iframe{
      width: 200px;
    }

    violino: http://jsfiddle.net/h9gTm/

    modifica: vertical align aggiunto

    css:

    div {
        text-align: center;
        width: 100%;
        vertical-align: middle;
        height: 100%;
        display: table-cell;
    }
    .iframe{
      width: 200px;
    }
    div,
    body,
    html {
        height: 100%;
        width: 100%;
    }
    body{
        display: table;
    }

    violino: http://jsfiddle.net/h9gTm/1/

    Edit: FLEX soluzione

    utilizzando display: flex sul <div>

    div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    violino: http://jsfiddle.net/h9gTm/867/

    curato solo cambiare il margine di auto, dal momento che non lavoro con gli iframe, invece di utilizzare text-align per
    margin:auto funziona su iframe se si visualizza come blocco 🙂 iframe {display:block;margin:auto;} jsfiddle.net/EnmD6/5
    ha funzionato perfettamente
    Proprio a garantire la sua entrata anche aggiungere: border:0; margin:0; al tuo corpo CSS

    OriginaleL’autore Facundo Colombier

  2. 5

    Provare questo:

    #wrapper {
        text-align: center;
    }
    
    #wrapper iframe {
        display: inline-block;
    }

    OriginaleL’autore Philip

  3. 2

    Penso che se si aggiunge margin: auto; al div di seguito dovrebbe funzionare.

    div#iframe-wrapper iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        right: 100px;
        height: 100%;
        width: 100%;
    }

    OriginaleL’autore Adrian Mann

  4. 0

    Si potrebbe facilmente utilizzare display:tabella a vertical-align contenuto e text-align:center per l’allineamento orizzontale tuo iframe.
    http://jsfiddle.net/EnmD6/7/

    html {
        display:table;
        height:100%;
        width:100%;
    }
    body {
        display:table-cell;
        vertical-align:middle;
    }
    #top-element {
        position:absolute;
        top:0;
        left:0;
        background:orange;
        width:100%;
    }
    #iframe-wrapper {
        text-align:center;
    }

    versione con tabella-riga http://jsfiddle.net/EnmD6/9/

    html {
        height:100%;
        width:100%;
    }
    body {
        display:table;
        height:100%;
        width:100%;
        margin:0;
    }
    #top-element {
        display:table-row;
        background:orange;
        width:100%;
    }
    #iframe-wrapper {
        display:table-cell;
        height:100%;
        vertical-align:middle;
        text-align:center;
    }
    Ma quando si riduce a icona la finestra per quanto possibile, vedere come l’iframe va oltre il bordo destro dei suoi dintorni div(lo sfondo arancione in alto)
    aggiungere verticale del corpo imbottitura o verticale con un margine di iframe contenitore per mantenere una zona di sicurezza . Altro, continuare a utilizzare il display superiore elemento e iframe-contenitore-tabella-riga … questa demo è il suggerimento di vedere come le cose facili può essere fatto tramite idsplay:tavolo/table-cell/tabella-riga e così via.
    jsfiddle.net/EnmD6/7
    Ragazzi, quello che sto cercando di dirti è che l’iframe va oltre le montagne circostanti, div. Basta spremere il risultato-finestra e scorrere a destra e vedere come va al di là della destra-confine di arancia, div.
    oups, scusa, non mancasse di aggiornare il jsfiddle, vedere jsfiddle.net/EnmD6/9 e confuso che cosa si intende, proprio come si aspettava, il defaut di posizione assoluta viene mostrato 🙂

    OriginaleL’autore G-Cyr

  5. 0

    Primo rimuovere position:absolute di div#iframe-wrapper iframe, Rimuovere position:fixed e tutti gli altri css da div#iframe-wrapper

    Quindi applicare il css,

    div#iframe-wrapper {
      width: 200px;
      height: 400px;
      margin: 0 auto;
    }

    VIOLINO DEMO

    Questo solo totalmente non funziona perché non scorrere l’iframe stesso
    si desidera scorrere iframe quando la pagina è in movimento??
    Sì. Altrimenti è fisso sulla finestra. Inoltre, sarebbe bello se la barra di scorrimento verticale della finestra non stava mostrando.
    controllare il mio aggiornati risposta. controllo aggiornato violino
    hai fatto il lavoro??

    OriginaleL’autore Prasanth K C

  6. 0

    Se tutti si desidera fare è visualizzare un iframe in una pagina, la soluzione più semplice che ho potuto venire con non richiede div o flex roba è:

    html {
        width: 100%;
        height: 100%;
        display: table;
    }
    
    body {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

    E quindi il codice HTML è solo:

    <html>
      <body>
         <iframe ...></iframe>
      </body>
    </html>

    Se questo è tutto quello di cui avete bisogno non è necessario div wrapper per farlo. Questo funziona per il contenuto del testo e roba, troppo.

    Violino.

    Anche questo sembra ancora più semplice.

    OriginaleL’autore Jason C

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *