Wie kann ich center ein Bild eines unbekannten Breite?

Verwendung von CSS, wie kann ich die Mitte ein Bild der unbekannten Dimensionen?

  • Die richtige Antwort wird je nachdem, ob die Bild-content (für die Kontrolle) oder einfach nur Dekorative (Stil).
InformationsquelleAutor JimBo | 2010-06-06
  1. 17

    Horizontal

    img {display:block; margin: 0 auto}

    oder

    .container {text-align:center}

    Vertikal

    /* container must contain some text as well */
.container, img {line-height:100px; vertical-align:middle}

    oder

    .container {display:table-cell; vertical-align:middle}

    Wenn das Bild nur dekorativ:

    .container {background: url(…) 50%;}
    • +1 für das denken, horizontal und vertikal.
    • Sehen Sie das Beispiel einfach hier: jsfiddle.net/RHu6Y das eindeutige problem ist, dass Sie geben die Breite und (oder) die Höhe der Eltern-containter
    • was ist, wenn das Bild, zwei Bilder, eins über dem anderen in einer absoluten position?
    InformationsquelleAutor Kornel
  2. 6

    Sehen wie die Bilder sind native inline-block Elemente (glaube ich - zumindest nicht block),

    text-align: center

    für den umgebenden container wird den job zu erledigen.

    InformationsquelleAutor Pekka 웃
  3. 3

    Können Sie CSS verwenden, wie diese:

    img { display: block; margin: 0 auto; }
    InformationsquelleAutor Martti Laine
Schreibe einen Kommentar