CSS Zentrierung Diashow Bilder

Ich bin Probleme horizontal zentrieren meine slideshow Bilder, so dass Sie zentral auf alle Bildschirmgrößen /- Auflösungen.

Den HTML sieht als solche

<div id='banner'>
    <div class='slides_container'>
        <div>
            <a href='#'><img src='images/banner.png'></a>
        </div>
        <div>
            <a href='#'><img src='images/banner2.png'></a>
        </div>
    </div>
</div>

Und die CSS dazu passend ist:

#banner {
    width:100%;
    margin-bottom:50px;
}

.slides_container {
    width:100%;
    height:500px;
}

.slides_container div {
    width:1100px;
    height:500px;
    text-align:center;
}

Ich bin wirklich kämpfen hier, um das Bild zu zentrieren auf alle screen-Grössen, da die Polsterung und Margen, die nicht arbeiten, ich bin in der Notwendigkeit einer anderen Methode!

Alle Antworten sind extrem geschätzt.

InformationsquelleAutor James Parker | 2012-05-08

0

Sollten Sie sicherstellen, dass die .slides_container div ist zentriert innerhalb des übergeordneten, d.h.
```
.slides_container div { 
  margin: 0px auto; //center
  width:1100px; 
  height:500px; 
  text-align:center; 
} 
```
Wenn das nicht funktioniert, Sie müssen sicherstellen, dass der übergeordnete container ist die Breite 100% der Seite.

Wenn die Eltern nicht in der Breite 100% auf der Seite der Eltern muss diese Eigenschaft auch:
```
.slides_container {
    margin: 0px auto;
}
```
Wenn das nicht funktioniert, dann müssen Sie sicherstellen, dass das übergeordnete Element ist 100% der Breite der Seite.

Hoffe, das hilft.

Bearbeiten

Nahm ich einen Blick auf es in FireBug, und es war sofort ersichtlich, dass die Folie Behälters auf 3800px breit, und die div in der nicht über eine Breite gesetzt. Wenn Sie das div in der slide-container auf 100% der Breite, es wird dazu führen, daß Sie 3800px breit, so dass wird nicht funktionieren.

Durch die Art der Aufgabenstellung, die Sie verwenden, es ist mit eine abolute positioniertes div zu arbeiten. So margin: 0px auto funktioniert hier nicht.

Die Lösung ist ein bisschen javascript ausführen, onload, und auf Fenster Größe ändern, um das div, das hält das Bild an die Breite des browser-Fensters, und text-align: center. So zum Beispiel, da habe ich 1280px breiten monitor, dieser zentriert das Bild für mich:
```
.slides_control div {
    width: 1280px;
    text-align: center;
}
```
- Oh, und ich vergaß zu erwähnen, wenn die img ist nicht das füllen der div es enthalten ist, müssen Sie auch sicherstellen, dass die div eingestellt ist text-align: center; oder machen die img Breite die gleiche wie die container
- Hi, da leider keine der obigen Kommentare, die das Problem gelöst 🙁 ich kam zu dem Schluss, dass wegen der Ungewissheit CSS-Regeln angewendet, die von der jQuery-plugin, es wird nahezu unmöglich. Nachdem das jQuery-plugin div-Klassen entfernt werden, die mit dem content-wrapper 'auf' text-align:center' die Bilder center perfekt. Ich denke ich werde versuchen müssen, ein anderes slideshow plugin, es sei denn, Sie denken, Sie könnten von einer weiteren Unterstützung. Und nur zur Anmerkung ich habe versucht, mit !wichtig.
- wenn Sie IE9 oder FireFox mit FireBug, drücken Sie die F12-Entwicklertools, klicken Sie auf das "Pfeil" - Symbol, wählen Sie den container aus, in Frage, und der Blick auf das CSS, die tatsächlich angewendet, mit ein wenig Untersuchung sollten Sie in der Lage sein, um das herauszufinden.
- Meine Entschuldigung Ozzy das ist, was ich meinte. Wenn ich geprüft mit firebug habe ich gesehen das CSS wurde angewendet, ich habe den Rand, um alle möglichen tags jetzt noch keine Wirkung. Als letzten Ausweg ich ging sogar und hart codiert in das JQuery-plugin. Wenn Sie denken, es wird helfen, ich kann nach den JS generierte CSS? Danke.
- Erstellen Sie eine jsfiddle.net mit Ihren vollständigen HTML -, CSS-und Ihre JS, dann geben Sie uns den link zu.
- jsfiddle.net/vRcxy/1 Dort gehen Sie Ozzy. Das Ergebnis-Feld erweitert werden muss vertikal und horizontal, um zu sehen, das Problem vollständig.
- Siehe meine aktualisierte Antwort
- Vielen Dank, es funktioniert, ich werde schreiben, bis die JS jetzt. Wieder einmal, Dank einer Last 😀 (Leider kann ich Euch keine rep noch, aber wenn ich kann werde ich)
InformationsquelleAutor Ozzy
0

Hinzufügen .slides_container img und margin:0 auto
```
#banner { width:100%; margin-bottom:50px; }

.slides_container {
    width:100%;
    height:500px;
}

.slides_container div, .slides_container img {
    width:1100px;
    height:500px;
    text-align:center;
    margin:0 auto; }
```
- Vielen Dank für die Antwort, leider ist dieser nicht erreicht hat, der Zentrierung, in der Tat das Ergebnis auf dem Bildschirm hat sich nicht geändert.
- kannst du uns ein link, um zu sehen, was Ihr sehen?
- Sichere Sache. tinypic.com/r/246jiav/6 Wie Sie sehen können die Bilder für die slideshow bleibt auf der linken Seite.
InformationsquelleAutor breezy
0

Normalerweise verwenden Sie margin:0 auto; zu handhaben. text-align nicht tun Sie gutes für div.

InformationsquelleAutor 5566

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bearbeiten