Ralf Heumann: Bilder nach optischer Mitte zentrieren

Hallo,

gibt es eine Möglichkeit beim Zentrieren eines Bildes (beispielsweise eines Logos auf einer Startseite) das Bild nach einer optischen Mite zu zentrieren?
Ich habe zur Verdeutlichung 2 Skizzen bearbeitet:

würde ich bei einer größeren Grafik einfach nur <center></center> verwenden deren Charakteristik aber eindeutig eine verschiedene Gewichtung bei den Formen und Flächen aufweist dann würde das auf dem monitor etwa so aussehen:

  • Zentriert -

    Die gestrichelte Linie stellt die Mitte des Bildschirmes dar.
    Die Gewichtung der Grafik fällt eindeutig auf den rechten Teil. Man hat den Eindruck die Grafik würde kippen.

Ich möchte die Grafik aber nach einer optischen mitte zentrieren lassen (egal wie groß der Monitor und die Auflösung ist)

  • Optische Mitte -

Gibt es da eine Möglichkeit z.B. mit CSS die Grafik an einem Bestimmten Punkt zentrieren zu lassen oder wie würded ihr das bewerkstelligen?

Auf Monitoren mit niedriger Auflösung sieht das noch doofer aus wenn ich es einfach nur zentriere, weil die Grafik so wirkt als würde sie am rechten Bildschirmrand kleben...

Vielen Dank schonmal für eure Hilfe

regards
Ralf

  1. Hallo,

    Gibt es da eine Möglichkeit z.B. mit CSS die Grafik an einem Bestimmten Punkt zentrieren zu lassen oder wie würded ihr das bewerkstelligen?

    Mit css gibt es so eine Möglichkeit nicht. Was du machen könntest wäre das Bild aufzuteilen (2 Bilder machen) und zwar da, wo du denkst, sei die optische Mitte.
    Dann kannst du den linken Teil mit margin-right:50%; und den rechten mit margin-left:50%; ausrichten. Dazu musst du natürlich beide Elemente aus dem Textfluss nehmen. Geeignet wäre float:right; für den ersten Teil bzw. float:left; für den zweiten.

    Nicht getestet, sollte aber gehen.

    Viele Grüße
    Patrick

    --
    "Though this be madness, yet there's method in't."
    sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
  2. Hi,

    ich würde irgendwie versuchen, das Bild in zwei Teile zu splitten - eben exakt bei der Mitte... Die linke Hälfte kannst du dann mit right:50%, die rechte Hälfte mit left:50% positionieren...

    E7

  3. Hallo Ralf,

    Genau wir ShiNtoKu und e7 kann mich mir auch keine geradlinige Loesung mit CSS vorstellen. Mein Ansatz geht in die Richtung, dass du

    • entweder den Bildern einen Namenbestandteil gibst, der die optische Mitte repraesentiert und damit serverseitig einen Style zuteilst (zB. bild_70.jpg waere ein Bild, dass die optische Mitte bei 70% des Bildes hat)
    • oder jedem Bild von von Hand zu  Fuss eine eigene CSS-Klasse zuweist

    Gruß,

    Dieter