Wie kann ich ein div in die Mitte der Seite?

Ich bin mit jQuery zu erstellen, einen "dialog" sollte pop-up auf der Oberseite der Seite und in der Mitte der Seite (vertikal und horizontal). Wie gehe ich darum, es bleiben in der Mitte der Seite (auch wenn der Benutzer die Größe oder Schriftrollen?)

InformationsquelleAutor Max Schmeling | 2009-07-29
  1. 8

    Ich würde

    position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);

    aber mit dieser Lösung und einem Browser viewport-Größe von weniger als Ihre dialog ist, Teile des dialogs wird nicht erreichbar auf der Oberseite und der linken Seite, weil Sie außerhalb des Viewports.
    So haben Sie zu entscheiden, ob es geeignet für Dialoge Größe.

    CSS(weiß nicht, wie zu berechnen, noch nicht. Also der kleine Mathe-dort hat zu sein getan durch Sie, jetzt. Also dein dialog hat eine Feste Größe zu werden, die Sie wissen müssen.)

    Edit:

    Oh ja, wenn Sie wollen, um zu dienen dem Dialogfeld für den IE6 zu, sollten Sie etwas wie das hier tun:

    #dialog { position: absolute; }
#dialog[id] { position: fixed; }

    Seit IE6 ist nicht in der Lage, Feste Positionen und auch nicht in der Lage, Attribut-Selektoren, der IE6 wird nur derjenige, der in die Stellung, die für absolute. (Dies betrifft nur mit scrolling-Verhalten. absolute bleibt auf seinen Platz in der Seite und fest bleibt an seinem Platz im browser. Der rest ist ähnlich.)

    • Nicht Stellung Feste Probleme im IE6?
    InformationsquelleAutor Hurix
  2. 3

    Check-out Infinity-Web-Design Stück auf dieser.

    #mydiv {
   background-color:#F3F3F3;
   border:1px solid #CCCCCC;
   height:18em;
   left:50%;
   margin-left:-15em;
   margin-top:-9em;
   position:absolute;
   top:50%;
   width:30em;
}

    Dies ist die CSS, die Sie verwenden, und ich habe es getestet in mehreren Browsern.

    Werden Sie feststellen, dass der linke Rand ist die negative Hälfte der Breite und der oberen Grenze ist die negative Hälfte der Höhe. Dies sorgt für die Zentrierung, mehr oder weniger, mit absolut-Positionierung es bei 50% oben und Links.

    InformationsquelleAutor idrumgood
  3. 0

    Setzen ein div horizontal in der Mitte lege ich immer margin: 0 auto. Aber es kann nicht sein, ein floating element und im IE habe ich immer die benötigt werden, um ein div und dann geben Sie die Eigenschaft text-align: center, so dass Sie die Innenseite div ist horizontal zentriert.

    InformationsquelleAutor cssmaniac
  4. 0

    Wenn Sie wissen, das element offset-Abmessungen (Breite/Höhe + padding) verwenden, können Sie diese CSS:

    elementContainerSelector {
    position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

elementSelector {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -[half of offset height]px 0 0 -[half of offset width]px;
}

    Hurix Antwort funktioniert auch, und beachten Sie die Hinweise in den, dass die Antwort so gut.

    InformationsquelleAutor eyelidlessness
  5. 0

    Halten margin-left:auto und margin-right:auto

    InformationsquelleAutor
Schreibe einen Kommentar