Zentrierung mehrere Bilder im CSS nebeneinander
Ich bin Anfänger in CSS und HTML, so dass ich bin sicher, dies ist eine Sauerei. Aber was ich versuche zu tun, ist center 3 Bilder nebeneinander in einem horizontalen center in CSS. Ich habe versucht, verschiedene Lösungen bekommen haben Sie richtig schließen aber das Sie noch stecken bleiben auf der linken Seite der Seite oder stapeln auf der jeweils anderen (und manchmal überschneiden sich).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Und mein CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
Die Bilder standardmäßig sind riesig. die 2. CSS-block-Größe, aber ich kann nicht bekommen Sie zu viel anderes zu tun. Irgendwelche Ideen?
- Sie sagen, Bilder sind in verschiedenen breiten und Höhen und Sie wollen, dass Sie horizontal und vertikal zentriert?
- Randnotiz:
vertical-align: center;
ist nicht gültig. - Das ist keine Randnotiz, Mann, das ist der wichtigste Punkt.
:)
- Überprüfen Sie, mein update ! 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie fast die gleichen CSS, aber mit einer einfachen Korrektur, ändern:
Und entfernen diese:
Gibt es keine
center
hier. Es mussmiddle
. Bitte korrigieren Sie es. Und entfernendisplay: inline-block
von der<div>
. Ihre endgültige code sollte wie:CSS:
HTML:
Klicken Sie auf Ausführen-Code-Snippet und drücken Sie ganze Seite, um zu prüfen, ob das, was Sie erwarten.
vertical-align
an alle!:)
Versuchen
display: inline-block
zudisplay: block
(sowie Beseitigung vonmargin-left: auto; margin-right: auto;
. Wenn Sie ok sind, mit#imagesMain
unter bis 100% der Breite des Bildschirms, mit der die Bilder zentriert im inneren, dieser wird funktionieren.Wohl das problem ist der container, da das Bild korrekt ausrichten auf die Mitte, habe ich den code vereinfachen und die farbigen container und Bilder:
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Dem Lesen der anderen Kommentare, die ich denke, Sie wollen alle ausgerichtet in der Mitte, dies ist eine gute Ressource für den code erzeugen, der für die FLEX-BOX: http://the-echoplex.net/flexyboxes/
- Und dies ist das Beispiel: https://jsfiddle.net/bcpph0pp/2/
versuchen learing flexbox, weil es hat viele Verwendungen für schön ausrichten Objekte und Inhalte.
es hält auch Ihre css sehr klein.
wenn Sie möchten, um Sie zu halten zentriert al die Zeit. sollten Sie verwenden
justify-content: center;
CSS:
HTML:
für alternative Verwendungen Blick auf css-tricks Sie geben gute Beispiele dafür ab, wie flexbox.