Bilder nicht richtig in div zentriert

Ich habe ein div mit 5 Bildern in einer Reihe, die jeweils 300px sind. Mit einem 10px Rand auf jeder Seite sollten sie in meinem div bei 1600px breit passen, aber das letzte Bild stößt auf die nächste Zeile. Warum passt es nicht? Nach etwas Versuch und Irrtum sehe ich, dass, wenn ich meine Ränder auf 8.5px einstelle, sie richtig passen, aber das scheint keinen Sinn zu machen ?? Ich habe keine andere Grenzen, Polsterung usw.Bilder nicht richtig in div zentriert

Hier ist meine CSS:

#wrap { 
    width: 1600px; 
    margin: 0 auto; 
    background-color: red; 
} 

.image { 
    width: 300px; 
    margin: 8px 10px 0 10px; 
    vertical-align: text-top; 
}

Mein HTML sieht ungefähr so aus:

<div id="wrap"> 
<div id="portfolio"> 
    <section> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
    </section> 
    <section> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
     <a><img></a> 
    </section> 
</div>

Quelle

2016-03-25 Sophia

Es gibt kein Element mit der '.image' Klasse in Ihrem html? –

Stellen Sie uns jfiddle. –

jsFiddle, bitte. –

Der Grund für das Problem wahrscheinlich ist:

In Ihrem Beispiel-Code, es ist tatsächlich so dass die Leerzeichen zwischen achors in Räume (die 4px breit jeweils).

Anstatt also nur anchor,anchor,anchor..., es tatsächlich ist die Anzeige anchor,space,anchor,space... usw.

Lösung:

Sie entweder nur Bilder verwenden können (keine Anker) und die Leerzeichen zwischen den einzelnen entfernen, oder Sie können die Schwimmer Anker links:

a { float: left; }

Hier ein funktionelles JSfiddle ist, wo es zeigt, dass durch die Anker und Raum zwischen <img> Umbauten zu entfernen Es erlaubt ihnen, alle in der gleichen Linie zu sein, auch ohne Schwimm:

https://jsfiddle.net/q6ubzp0t/

Quelle

2016-03-25 17:18:36 Dave

Warum die -1 Stimme? Von einem anderen Antworter? – Dave

Danke! Die Erklärung war hilfreich - ich wusste nicht, dass Anker den 4px Leerraum hinzufügen (ich lerne immer noch!). Ich habe Ihre Vorschläge getestet und sie haben funktioniert, aber ich kann die Anker nicht entfernen, da sie Links sind haben verschiedene Größen von Bildern. Ich wollte aber die Anker auf meinem html ausgerichtet halten (anstatt den weißen Zwischenraum zwischen ihnen zu löschen), weil ich in der Lage sein muss, schnell ein Bild zu finden und bei Bedarf zu ersetzen ... Ich habe einige andere Seiten durchsucht und das schien zu funktionieren: http://StackOverflow.com/a/18300727/6114800 aber wird dies als "akzeptabler" Code betrachtet? – Sophia

Eigentlich habe ich auch versucht, font-size zu machen: 0 auf meiner #wrap und das scheint besser zu funktionieren, als meinen HTML-Code zu stopfen. Danke nochmal allen! – Sophia

-1

Hier ist Ihre Lösung hinzufügen dies zu Ihrem Stil und es wird gut funktionieren

a{ 
    float: left; 
}

Quelle

2016-03-25 17:16:05 ahmdabos

Eigentlich, obwohl Floating hier eine Option ist, ist es nicht die Elemente zentrieren. –

... aber das letzte Bild springt auf die nächste Zeile. Warum ist es nicht passend?

Das Problem, auf das Sie stießen, ist white-space margin.

Ein Inline-Element hat einen kleinen Rand an der rechten/unteren Kante, was zu falschen Berechnungen führt.

Die einfachste Art und Weise zu lösen dies durch Setzen wrap zu display: flex

Quelle

2016-03-25 17:17:40 LGSon

Antwort

Verwandte Themen