Wie zentriert man das Bild horizontal innerhalb eines div-Elements?

Lesezeit: 9 Minuten

Benutzeravatar von Jacob Windsor
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.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}
<!--link here-->

<a href="https://stackoverflow.com/questions/10989238/NotByDesign">
  <div id="thumbnailwrapper">

    <a href="https://stackoverflow.com/questions/10989238/NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="https://stackoverflow.com/questions/10989238/NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

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.

    – 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 beigelegt a. Ich bin dumm.

    – Schoaib

    12. Juni 2012 um 1:22 Uhr

Benutzeravatar von Marvo
Marvo

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Hier ist meine Lösung in: http://jsfiddle.net/marvo/3k3CC/2/

  • 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

Benutzeravatar von m4n0
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.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Ausgabe:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

  • 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

Benutzeravatar von mk.hd
mk.hd

Ich habe gerade diese Lösung unten auf der W3-CSS-Seite gefunden und sie hat mein Problem beantwortet.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Quelle: http://www.w3.org/Style/Examples/007/center.en.html

  • 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

    – Alexey Strakh

    8. Juni 2016 um 0:07 Uhr

Benutzeravatar von Mehmet Yaden
Mehmet Jaden

Das würde auch gehen

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

Kevins Benutzeravatar
Kevin

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:

HTML

<img class="center" src="https://stackoverflow.com/questions/10989238/image.jpg" />

Sie können das CSS auch in Ihr(e) Element(e) einfügen, indem Sie wie folgt vorgehen:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="https://stackoverflow.com/questions/10989238/image.jpg" />

…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 Container relatively 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


Benutzeravatar von HoldOffHunger
HoldOffHunger

Dies ist, was ich am Ende getan habe:

<div style="height: 600px">
   <img src="https://stackoverflow.com/questions/10989238/assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

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 Container relatively 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


Benutzeravatar von Jared Farrish
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. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

  • 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

1429820cookie-checkWie zentriert man das Bild horizontal innerhalb eines div-Elements?

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

Privacy policy