CSS: center einen festen div

Habe ich eine Klasse für einen fest positionierten div, Sie bleiben am unteren Rand des view-port. Ich versuche, die Breite automatische, so dass das div ändert weite zentriert bleibt.

.box {
position: fixed;
width: 80%;
bottom: 20px;
left: 50%;
margin: 0 0 0 -40%;
max-height: 50%;
overflow: auto
}

Irgendwelche Ideen? Ich habe versucht, einen container mit text-align: center dann display: inline, aber es produziert verrückte Ergebnisse.

InformationsquelleAutor Myforwik | 2012-01-13
  1. 6
    .box {
    position   : fixed;
    left       : 10%;
    right      : 10%;
    bottom     : 20px;
    max-height : 50%;
    overflow   : auto;
}

    Können Sie left und right zusammen, um die Mitte der element (statt Breite).

    Wenn Sie möchten, verwenden Sie Breite, können Sie dies tun:

    .box {
    position   : fixed;
    left       : 10%;
    width      : 80%;
    bottom     : 20px;
    max-height : 50%;
    overflow   : auto;
}

    Wenn Sie wollen-center-HTML-in das Feste element, das Sie dies tun können:

    .box > div {
    width      : 50%;
    min-width  : 150px;
    margin     : 0 auto;
    text-align : center;
}

    Hier ist eine demo: http://jsfiddle.net/dFXt5/

    • Noch hält die Breite auf 80%? Ich möchte die Breite dynamisch auf der Grundlage der Daten, die es enthält - zum Beispiel, wenn es mit nur einem Wort, dieses Wort sollte in der Mitte eine winzige div, nicht ein div, das dauert bis zu 80% der view-port.
    • Check-out die demo. Die verschachtelten div-genau das tut. Wenn Sie entfernen Sie den Rahmen und die Hintergrundfarbe der text schwebt in der Mitte des Viewports.
    • Oh danke. Ich war auf IE6 und vergessen die > in der CSS nicht funktioniert.
    InformationsquelleAutor Jasper
  2. 0
    .centered {  position: fixed;  top: 50%;  left: 50%;  margin-top: -[1/2(element-height)];  margin-left: -[1/2(element-width)];}

    Dieser Arbeit.

    InformationsquelleAutor Mario Gonzales Flores
Schreibe einen Kommentar