Wie zentriert man das Bild horizontal innerhalb eines div-Elements?
Lesezeit: 9 Minuten
Jakob Windsor
Wie kann ich ein Bild (horizontal) in seinem Container-Div zentrieren?
Hier ist das HTML und CSS. Ich habe auch das CSS für die anderen Elemente des Thumbnails eingefügt. Es läuft in absteigender Reihenfolge, sodass das höchste Element der Behälter von allem ist und das niedrigste in allem steckt.
Okay, ich habe das Markup ohne das PHP hinzugefügt, also sollte es einfacher zu sehen sein. Beide Lösungen scheinen in der Praxis nicht zu funktionieren. Der Text oben und unten kann nicht zentriert werden und das Bild sollte innerhalb seines Container-Div zentriert werden. Der Container hat einen versteckten Überlauf, also möchte ich die Mitte des Bildes sehen, da dort normalerweise der Fokus liegt.
Ist es beabsichtigt, dass das Bild in der gleichen Zeile wie der erste Link (die Künstler-URL) angezeigt wird?
– Schoaib
12. Juni 2012 um 0:44 Uhr
img‘s unterliegen text-align: center es sei denn, ihre display wurde verändert.
Jacob, kannst du wenigstens das tatsächliche Markup posten, das der Browser sieht, und nicht das PHP-infundierte Template? Auch eine funktionierende jsfiddle.net hilft immer.
– Jared Farrish
12. Juni 2012 um 0:57 Uhr
Vergiss meinen Kommentar – ich habe das nicht bemerkt img war beigelegt a. Ich bin dumm.
– Schoaib
12. Juni 2012 um 1:22 Uhr
Marvo
#artiststhumbnail a img {
display:block;
margin:auto;
}
Ich denke nicht, dass dies eine gute Idee ist, und ich glaube auch, dass es einige Vorbehalte gibt, wie z margin: auto hängt davon ab, ob das enthaltende Element einen bestimmten Breitenwert hat.
– Jared Farrish
12. Juni 2012 um 0:50 Uhr
Ich verbessere immer noch meine CSS-Fähigkeiten, also danke für den interessanten Studienpunkt. Aber in diesem Fall verwendet er eine feste Breite auf dem Container.
– Marvo
12. Juni 2012 um 0:55 Uhr
Was genau bedeutet bezeichnete Breite in diesem Zusammenhang? Scheint auf jeden Fall nützliches Wissen zu haben.
– Schoaib
12. Juni 2012 um 1:09 Uhr
Sieh dir das an Geige, die ich gemacht habe; Ich bin mir nicht sicher, was ich denken soll. Was Sie vorschlagen, wird nichts tun, und die img Ich glaube, es müsste sowieso eine Breite definiert werden, um eine Wirkung zu erzielen auto.
– Jared Farrish
12. Juni 2012 um 1:20 Uhr
Sie haben die von mir vorgestellte Lösung nicht wirklich implementiert. Zweitens hat das umschließende Div eine Breite von 120 Pixel, was ungefähr der Breite des Bildes entspricht, wodurch es schwer zu erkennen ist, ob es das Bild tatsächlich zentriert. Hier ist meine Lösung: jsfiddle.net/marvo/3k3CC/2
– Marvo
12. Juni 2012 um 2:38 Uhr
m4n0
CSS Flexbox kann es mit machen justify-content: center auf dem übergeordneten Bildelement. Um das Seitenverhältnis des Bildes beizubehalten, fügen Sie hinzu align-self: flex-start; dazu.
Hervorragende Lösung, wenn der Browser dies unterstützt, was meiner tut. Kann auch verwendet werden align-items senkrecht zu zentrieren. Die verschiedenen Randlösungen funktionieren bei mir nicht, da das zu zentrierende Element keine Breiten- und Höhenattribute hat.
– Mark Rochkind
16. November 2017 um 22:59 Uhr
In meinem Fall hat das div eine bestimmte Größe (z. B. 50 Pixel) und dadurch wird das Bild auf 50 Pixel gestreckt.
– max
7. August 2018 um 21:39 Uhr
@Max In diesem Fall kannst du dich bewerben align-self zum Bildelement wie folgt jsfiddle.net/3fgvkurd
– m4n0
8. August 2018 um 9:38 Uhr
mk.hd
Ich habe gerade diese Lösung unten auf der W3-CSS-Seite gefunden und sie hat mein Problem beantwortet.
Ich benutze max-width: 100%; max-height: 100%; um die Größe des Bildes zu ändern, wenn der Bildschirm kleiner als das Bild ist, aber in diesem Fall ist es nicht zentriert. Irgendwelche Vorschläge, wie man mit diesen beiden angewendeten Attributen zentrieren kann
Das Beste, was ich gefunden habe (das scheint in allen Browsern zu funktionieren), um ein Bild oder ein beliebiges Element horizontal zu zentrieren, ist, eine CSS-Klasse zu erstellen und die folgenden Parameter einzuschließen:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
Anschließend können Sie die von Ihnen erstellte CSS-Klasse wie folgt auf Ihr Tag anwenden:
…aber ich würde nicht empfehlen, CSS inline zu schreiben, da Sie dann mehrere Änderungen in allen Ihren Tags mit Ihrem zentrierenden CSS-Code vornehmen müssen, wenn Sie jemals den Stil ändern möchten.
hat den Job gemacht, aber für die Browserkompatibilität müssen Sie die anderen Transformationsformen verwenden.
– Jay Rauch
22. Januar 2018 um 12:44 Uhr
Das habe ich auch gefunden Verknüpfung hilfreich sein. Es zeigt ein ähnliches transform: translate(-50%) Trick, den Sie hier zeigen, aber verwendet es in Verbindung mit margin-left: 50%statt left:50%. Es kontrastiert auch Lösungen, wenn das Element “relativ” vs absolute Positionierung. Dies dient hauptsächlich meiner zukünftigen Referenz, daher kann ich hier auf Ihre Antwort und eine Lösung, die ich zuvor verwendet habe, an einem (aufgewerteten) Ort verweisen. 🙂 css-tricks.com/centering-css-complete-guide
– SherylHohman
30. Juni 2020 um 11:25 Uhr
Oh, hier ist ein weiterer Leckerbissen, den ich bezüglich der Positionierung auf dem Element und dem Container gefunden habe [at w3.org] (w3.org/Style/Examples/007/center.en.html) für die Verwendung der transform: translate Trick: Wesentliche Regeln sind: 1) Mach das Containerrelatively positioniert, was es als Container für absolut positionierte Elemente deklariert. 2) Mach das Element selbst absolutegünstig positioniert. 3) Platzieren Sie es auf halber Höhe des Behälters mit „top: 50%“ (oder horizontal mit left:50%). 4) Verwenden Sie a translation um das Element um die Hälfte seiner eigenen Höhe (oder horizontal um die Hälfte seiner Breite) nach oben zu verschieben.
Dadurch wird die Bildhöhe auf 600 Pixel begrenzt und der übergeordnete Container horizontal zentriert (oder die Größe nach unten geändert, wenn die Breite des übergeordneten Elements kleiner ist), wobei die Proportionen beibehalten werden.
hat den Job gemacht, aber für die Browserkompatibilität müssen Sie die anderen Transformationsformen verwenden.
– Jay Rauch
22. Januar 2018 um 12:44 Uhr
Das habe ich auch gefunden Verknüpfung hilfreich sein. Es zeigt ein ähnliches transform: translate(-50%) Trick, den Sie hier zeigen, aber verwendet es in Verbindung mit margin-left: 50%statt left:50%. Es kontrastiert auch Lösungen, wenn das Element “relativ” vs absolute Positionierung. Dies dient hauptsächlich meiner zukünftigen Referenz, daher kann ich hier auf Ihre Antwort und eine Lösung, die ich zuvor verwendet habe, an einem (aufgewerteten) Ort verweisen. 🙂 css-tricks.com/centering-css-complete-guide
– SherylHohman
30. Juni 2020 um 11:25 Uhr
Oh, hier ist ein weiterer Leckerbissen, den ich bezüglich der Positionierung auf dem Element und dem Container gefunden habe [at w3.org] (w3.org/Style/Examples/007/center.en.html) für die Verwendung der transform: translate Trick: Wesentliche Regeln sind: 1) Mach das Containerrelatively positioniert, was es als Container für absolut positionierte Elemente deklariert. 2) Mach das Element selbst absolutegünstig positioniert. 3) Platzieren Sie es auf halber Höhe des Behälters mit „top: 50%“ (oder horizontal mit left:50%). 4) Verwenden Sie a translation um das Element um die Hälfte seiner eigenen Höhe (oder horizontal um die Hälfte seiner Breite) nach oben zu verschieben.
– SherylHohman
30. Juni 2020 um 11:40 Uhr
Jared Farrish
Ich werde auf die Beine gehen und sagen, dass das Folgende das ist, wonach Sie suchen.
Beachten Sie, dass Folgendes in der Frage meiner Meinung nach versehentlich weggelassen wurde (siehe Kommentar):
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
Was Sie also brauchen, ist:
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
Hmm … Ich wette, das funktioniert. Ich habe das IMAGE in meiner Lösung zentriert, aber ich kann sehen, wie die Frage so interpretiert werden könnte, dass das div-umschließt-das-Bild in einem anderen div zentriert wird. So oder so, gleiche Lösung.
– Marvo
12. Juni 2012 um 2:42 Uhr
Beide Lösungen funktionieren in der Praxis nicht. Ich hatte beide Lösungen ausprobiert, bevor es einfach nicht funktioniert. Bitte beachten Sie die Bearbeitung in der Frage
– Jakob Windsor
12. Juni 2012 um 13:27 Uhr
14298200cookie-checkWie zentriert man das Bild horizontal innerhalb eines div-Elements?yes
Ist es beabsichtigt, dass das Bild in der gleichen Zeile wie der erste Link (die Künstler-URL) angezeigt wird?
– Schoaib
12. Juni 2012 um 0:44 Uhr
img
‘s unterliegentext-align: center
es sei denn, ihredisplay
wurde verändert.– Jared Farrish
12. Juni 2012 um 0:45 Uhr
jsfiddle.net/cEgRP – einfach
text-align: center
– Zoltan Toth
12. Juni 2012 um 0:46 Uhr
Jacob, kannst du wenigstens das tatsächliche Markup posten, das der Browser sieht, und nicht das PHP-infundierte Template? Auch eine funktionierende jsfiddle.net hilft immer.
– Jared Farrish
12. Juni 2012 um 0:57 Uhr
Vergiss meinen Kommentar – ich habe das nicht bemerkt
img
war beigelegta
. Ich bin dumm.– Schoaib
12. Juni 2012 um 1:22 Uhr