Zentrierung mit max-Angaben

    - MS Windows 8
    - Firefox

    Hallo,
    meine CSS-Klasse sieht folgendermaßen aus:


    .foto {
    position : absolute;
    max-width : 90%;
    max-height : 90%;
    top : 3%;
    }

    In einem DIV-Container stelle ich dann das Foto dar:


    <div>
    <img class="foto" alt="foto" src="galerien/berlin/berlin.jpg">
    </div>

    Die Darstellung ist (fast) genauso, wie ich sie möchte: egal, wie groß das Browserfenster ist, die Größe des Fotos wird immer proportional angepasst. So soll es sein!


    Was leider nicht funktioniert, ist die Zentrierung im Browserfenster. Ich habe alles ausprobiert, leider ohne Erfolg.
    Ich kann nur vermuten, dass es an den "max-..."-Angaben liegt, denn bei Angabe einer festen Breite ist die Zentrierung kein Thema.


    Hat jemand eine Idee?
    Danke, Holger

    Naja.. welche Zentrierung denn..? Horizontal oder Vertikal..?


    Wenn du dem img noch

    CSS
    display: block;

    gibst, kannst du es mit[margin: 0 auto;[/code] horizontal Zentrieren..
    Wenn alle Bilder 90% hoch wären könntest du so mittig zentrieren..:

    CSS
    margin: 5% auto;


    Da du wahrscheinlich aber immer eine absolut mittige Zentrierung (horizontal und vertikal) haben willst probiere das..:

    CSS
    display: block;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;


    Das Bewirkt das das Element immer komplett mittig im Fenster ist. Achtung: eventuell musst du Feste Breite/Höhe angeben.. bevor du das tust nimm mal testweise

    CSS
    display: block;

    raus!

    Hallo, Wolf,
    entschuldige, ich meinte tatsächlich die horizontale Zentrierung.


    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;


    hat geklappt, danke!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden