Anzeige:
Ergebnis 1 bis 2 von 2

Thema: Bildposition mit CSS einstellen.

  1. #1
    Registrierter Benutzer Avatar von dodothegoof
    Registriert seit
    30.03.2005
    Ort
    Berlin
    Beiträge
    65

    Bildposition mit CSS einstellen.

    Es geht um die Gestaltung folgender Seite:
    http://bbt.rotaract.de/2009EUCO

    Wie man sehen kann sie die kleinen Vorschaubilder in den grauen Boxen nicht mittig zentriert, aber das hätte ich gerne.

    Die Bildergalerie wurde mit Lightbox erstellt und die Seite wird mit CMS bearbeitet, so dass die Galerie in folgender Weise erzeugt wird.

    Code:
    {PHOTOS:2009_EUCO:100}
    Das erzeugt dann einen HTML-Code der so aussieht.
    Code:
    <div class="thumbnails">
    <div class="thumbnail">
    <a href="/assets/image/2009_EUCO/EUCO09_001.JPG" rel="lightbox[2009_EUCO]"><img src="/assets/image/2009_EUCO/euco09_001.thumb-100.jpg" border="0" /></a>
    </div>
    ...
    </div>
    Die Definierung der beiden Klassen "thumbnails" und "thumbnail" erfolgt in CSS. Der Code sieht momentan so aus:

    Code:
    thumbnail {margin:0.5em;display:inline-block;Background:#333333;width:100px;height:100px;text-align:center;vertical-align:middle;}
    .thumbnail{border:2px solid #333333}
    .thumbnail:after {content: "."; display: inline-block; visibility: hidden; line-height:0;height:0;}
    div.thumbnails {display:inline-block;text-align:justify;vertical-align:middle;width:100%;}
    html[xmlns] .thumbnails {display:block;}
    * html .thumbnails {height:1%;}
    Was muss ich machen, um die Bilder zu zentrieren?
    Für Hinweise was ich aus dem Code rausschmeißen kann, weil doppelt vorhanden, bin ich auch dankbar.

  2. #2
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    Um Mittig zu zentrieren, muss der Browser den rechten und den link Rand/Abstand automatisch bestimmen. Also muss man ihm sagen, dass er ihn automatisch bestimmen soll, z.B. mit margin-left: auto; margin-right: auto; oder padding-left: auto; padding-right: auto;
    Homepage: www.pingu.info

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •