So erstellen Sie ein Bildzentrum (vertikal und horizontal) in einem größeren div [duplicate]

Lesezeit: 4 Minuten

So erstellen Sie ein Bildzentrum vertikal und horizontal in einem
Schade

Ich habe ein div 200 x 200 px. Ich möchte ein 50 x 50 px großes Bild direkt in der Mitte des div platzieren.

Wie kann es gemacht werden?

Ich kann es mit horizontal zentrieren text-align: center für die div. Aber die vertikale Ausrichtung ist das Problem..

  • Hier sind zwei einfache Methoden, um ein Element innerhalb eines div zu zentrieren, vertikal, horizontal oder beides (reines CSS): stackoverflow.com/a/31977476/3597276

    – Michael Benjamin

    19. August 2015 um 21:06 Uhr

  • programrscando.com/how-to-get-an-image-centered-using-css Hier ist eine schnelle Methode, um dies für das img-Tag zu tun.

    – Hitesh Ranaut

    11. April 2019 um 5:02 Uhr

So erstellen Sie ein Bildzentrum vertikal und horizontal in einem
bochgoch

Persönlich würde ich es als Hintergrundbild innerhalb des div platzieren, wobei das CSS dafür Folgendes ist:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Angenommen ein div mit id="demo" wie Sie bereits angeben height und width Hinzufügen eines background sollte kein Problem sein)

Lassen Sie den Browser die Belastung übernehmen.

  • Dies ist normalerweise die beste Antwort, es sei denn, die Größe des Bildes kann von kleiner bis größer als die Größe des Containers variieren. Im „kleineren“ Fall ist es in Ordnung, aber im „größeren“ Fall wird Ihr Bild beschnitten.

    – leandre_b

    11. Juli 2011 um 15:52 Uhr

  • Nicht so SEO-/leserfreundlich, wenn Sie ein ALT-Attribut hinzufügen möchten.

    – e11s

    27. August 2011 um 2:35 Uhr

  • Was ist, wenn wir ein Sprite verwenden? Ich versuche, das Hintergrundbild zu zentrieren, aber ich verwende ein CSS-Sprite. Irgendwelche Ideen?

    – Nathan

    23. November 2011 um 3:43 Uhr


  • @Nathan, das ist keine leichte Aufgabe. Sie können dies jedoch tun, wenn Sie die genauen Abmessungen des div kennen und genügend transparenten Raum um das Bild auf dem Sprite lassen, damit die anderen Bilder auf dem Sprite nicht angezeigt werden.

    – Pawel Nikolow

    5. Dezember 2012 um 15:16 Uhr

  • Meine Bilder haben immer eine andere Größe. Wie wendet man das an, wenn Bilder eine andere Größe haben?

    – Anirudha Gupta

    10. Oktober 2014 um 11:17 Uhr

  • Ich wusste, dass dies zu einer Abwertung führen würde. Ich dachte darüber nach, dies nur der Vollständigkeit halber aufzulisten, aber na ja.

    – Andik

    23. Dezember 2008 um 14:09 Uhr

  • Wussten Sie nicht, dass die Verwendung von Tabellen blind macht?

    – Pekka

    28. Dezember 2009 um 18:23 Uhr


  • CSS, wenn möglich, aber dies ist definitiv ein nützlicher Fallback. Vergessen Sie nicht, warum wir von Anfang an aufgehört haben, Tabellen zu verwenden. Verwenden Sie, was am meisten ist flexibel Lösung. Manchmal ist es das.

    – Russel Leggett

    24. März 2010 um 14:49 Uhr

  • Notiz: Dies mag 2008 „akzeptabel“ gewesen sein, aber 2012 ist dies der Fall niemals akzeptabel.

    – Animation

    19. Januar 2012 um 19:58 Uhr

  • Einwand, animuson: Alle anderen Lösungen hier gehen davon aus, dass Sie die Bildgröße kennen, wie sie im Browser angezeigt wird, was nicht der Fall ist, wenn Sie ein responsives Layout entwerfen, in dem Ihr Bild “Höhe:100%” und sein Container ist “Breite:25%”, was einen x- oder y-Rand unbekannter Größe hinterlässt.

    – Ich habe einen Computer

    18. Juli 2012 um 3:09 Uhr


Ich würde dein größeres div mit setzen position:relative; dann für Ihr Bild tun Sie dies:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Dies funktioniert nur, weil Sie die Abmessungen sowohl des Bildes als auch des enthaltenden div kennen. Dadurch können Sie auch andere Elemente innerhalb des enthaltenden div … haben, wo Lösungen wie die Verwendung von line-height dies nicht tun.

BEARBEITEN: Beachten Sie … Ihre Ränder sind negativ, halb so groß wie das Bild.

  • css-tricks.com/snippets/css/…

    – Pawel Nikolow

    5. Dezember 2012 um 15:40 Uhr

  • Ich habe dies verwendet, aber entfernt margin Bits und Hinzufügen -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);. Gibt eine allgemeinere Lösung, die eine Elementgröße benötigt.

    – Jon

    13. September 2013 um 21:24 Uhr

Das funktioniert richtig:

display: block;
margin-left: auto;
margin-right: auto 

Ansonsten versuchen Sie dies, wenn das obige Ihnen nur eine horizontale Zentrierung gibt:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

  • css-tricks.com/snippets/css/…

    – Pawel Nikolow

    5. Dezember 2012 um 15:40 Uhr

  • Ich habe dies verwendet, aber entfernt margin Bits und Hinzufügen -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);. Gibt eine allgemeinere Lösung, die eine Elementgröße benötigt.

    – Jon

    13. September 2013 um 21:24 Uhr

1646320332 389 So erstellen Sie ein Bildzentrum vertikal und horizontal in einem
daaawx

Verwenden Flexbox:

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

  • Hübsch! Dies hat tatsächlich funktioniert und hilft, wenn Sie das Bild nicht als Hintergrund platzieren können, wie in der vorherigen Antwort vorgeschlagen.

    – TheKidsWantDjent

    5. Dezember 2017 um 12:35 Uhr

924650cookie-checkSo erstellen Sie ein Bildzentrum (vertikal und horizontal) in einem größeren div [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy