CSS-responsive horizontal zentrieren

Ich versuche, horizontal center ein Bild (logo) für jede Bildschirmgröße an sowas

#container {position:relative width:100%; height:100%;}    
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}

und es funktioniert nicht. Muss ich vielleicht eine Breite für container in Pixel?

InformationsquelleAutor alexandru | 2011-09-27

  1. 7
     #logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}

    InformationsquelleAutor Kevin Bowersox

  2. 3
    #logo { height:100px; margin:0 auto; width:500px; }

    Dies ist der standard-Weg von der Zentrierung eines Bildes, indem Sie sagen, es ermittelt automatisch den Raum auf der linken und rechten Seite, die eine Feste Größe container.

    Und ein Beispiel.

    InformationsquelleAutor elsom25

  3. 2

    Ich denke, es hängt davon ab, wie definieren Sie "responsive", aber wenn du meinst reaktionsschnell Weg in dem Sinne, dass der Inhalt passt, um Platz für die Breite des Viewports, dann alle anderen Antworten, die nicht diese Kriterien erfüllen, da Sie verlassen sich auf Feste pixel-breiten. Was passiert zum Beispiel, wenn der view-port liegt weniger als 500 Pixel?

    Einem ähnlichen Konzept arbeiten mit Prozent-breiten, - und tatsächlich reagieren, dass die Sache, die Sie zentrieren wird auch flexibel sein:

    #container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}

    Wenn Sie nicht wollen, dass die "logo" - element zu bekommen, zu groß (auf riesigen Bildschirmen), können Sie hinzufügen max-width:600px; um ihn zu begrenzen, aber würden Sie müssen hinzufügen einige media-queries, um es richtig zu halten zentriert auf den großen Bildschirmen.

    InformationsquelleAutor emersonthis

Schreibe einen Kommentar