Bild mittig ausrichten

[Peter]

Hallo!

Ich habe hier ein quadratisches DIV mit einer Seitenlänge von 9em. In dieses DIV soll eine kleinere Grafik. Diese Grafik soll allerdings sowohl horizontal als auch veritkal in der Mitte sein, d.h. genau in der Mitte des Quadrates.

Horizontal konnte ich es mit text-align:center; ausrichten. Nur die vertikale Ausrichtung klappt irgendwie nicht...

Mfg.

Peter

[Stefan]

Horizontal konnte ich es mit text-align:center; ausrichten. Nur die vertikale Ausrichtung klappt irgendwie nicht...

Hast du schon text-valign:center; oder text-valign:middle; oder valign:center; bzw. valign:middle; ausprobiert?

Das dürfte klappen ...

[Efchen]

Hast du schon text-valign:center; oder text-valign:middle; oder valign:center; bzw. valign:middle; ausprobiert?

Keine dieser Eigenschaften gibt es in CSS.

[Daniel]

Hi,

Keine dieser Eigenschaften gibt es in CSS.

sind wir ein bisschen faul? hättest ihm wenigstens veraten können das es
vertical-align: middle; heißt. und das ganze hier beschrieben wird
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

MfG

[Efchen]

sind wir ein bisschen faul?

Ich dachte, Beleidigungen sind laut Netiquette verboten?

hättest ihm wenigstens veraten können das es
vertical-align: middle; heißt.

Wir sind hier bei SelfHTML. Oberste Regel in diesem Forum ist es (dachte ich), zuerst bei SelfHTML nachzuschauen. Warum hat er das nicht getan und stattdessen meine Zeit verschwendet?

und das ganze hier beschrieben wird
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

Leider steht da nicht dabei, dass es ein display:table-cell dazu benötigt, und auch nicht, dass der IE das nicht kann.

Sind wir ein bisschen faul, dass wir das nicht komplett erwähnt haben?

[Daniel]

Hi,

Ich dachte, Beleidigungen sind laut Netiquette verboten?

ich wollte dich nicht beleidigen.

Wir sind hier bei SelfHTML. Oberste Regel in diesem Forum ist es (dachte ich), zuerst bei SelfHTML nachzuschauen.

da hast du natürlich recht, aber es gibt leider etwas faule, zum teil
aber auch unfähige. ich selbst gebe zu auch manchmal nicht zuerst im
php-manual oder mysql-manual nachzuschaun bevor ich hier eine frage
stelle, zwischenzeitlich bin ich aber wissensreicher und kann auch die
suche dort bedienen.

Warum hat er das nicht getan und stattdessen meine Zeit verschwendet?

du kannst fragen stellen ;-)

Leider steht da nicht dabei, dass es ein display:table-cell dazu benötigt, und auch nicht, dass der IE das nicht kann.
Sind wir ein bisschen faul, dass wir das nicht komplett erwähnt haben?

nein das beruht auf meiner unwissenheit diesbezüglich :(

MfG

[Efchen]

ich wollte dich nicht beleidigen.

Ich habs auch nicht wirklich so aufgefasst :-)
Du hast nur etwas überschnell geantwortet, zu der Zeit habe ich wahrschienlich meine Antwort auf Peter formuliert.

Warum hat er das nicht getan und stattdessen meine Zeit verschwendet?
du kannst fragen stellen ;-)

Tja :-)
Irgendwas muss man ja können ;)

nein das beruht auf meiner unwissenheit diesbezüglich :(

Dann lerne aus meinem Posting weiter oben: https://forum.selfhtml.org/?t=111715&m=704211

Gruß,
-Efchen

[Sven Rautenberg]

Moin!

Leider steht da nicht dabei, dass es ein display:table-cell dazu benötigt, und auch nicht, dass der IE das nicht kann.

Mit der passenden line-height sollte das auch anders realisierbar sein.

- Sven Rautenberg

[Marc Reichelt]

Hallo Efchen,

Hast du schon text-valign:center; oder text-valign:middle; oder valign:center; bzw. valign:middle; ausprobiert?

Keine dieser Eigenschaften gibt es in CSS.

Richtig heißt es nämlich:
vertical-align:center;

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Marc Reichelt]

Hallo nochmals,

Richtig heißt es nämlich:
vertical-align:center;

Natürlich muss es so heißen:
vertical-align:middle;

Immer diese kleinen blöden Fehler.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Stefan]

Hast du schon text-valign:center; oder text-valign:middle; oder valign:center; bzw. valign:middle; ausprobiert?

Keine dieser Eigenschaften gibt es in CSS.

hmmm ... nicht?! war das nur bei tabellen? .... na dann background-position: center center;
oder mit margin:wert; (margin-top, margin-bottom, margin-left, margin-right)
oder padding:wert;

[Efchen]

hmmm ... nicht?! war das nur bei tabellen? .... na dann background-position: center center;
oder mit margin:wert; (margin-top, margin-bottom, margin-left, margin-right)
oder padding:wert;

Leider auch alles falsch :-)

[Stefan]

hmmm ... nicht?! war das nur bei tabellen? .... na dann background-position: center center;
oder mit margin:wert; (margin-top, margin-bottom, margin-left, margin-right)
oder padding:wert;

Leider auch alles falsch :-)

WARUM???? ich hab hier son buch, da steht drin, dass man mit padding innenabstände definieren kann .... also was soll da bitte falsch sein!?

[Marc Reichelt]

Hallo Stefan,

hmmm ... nicht?! war das nur bei tabellen? .... na dann background-position: center center;
oder mit margin:wert; (margin-top, margin-bottom, margin-left, margin-right)
oder padding:wert;

Leider auch alles falsch :-)

WARUM???? ich hab hier son buch, da steht drin, dass man mit padding innenabstände definieren kann .... also was soll da bitte falsch sein!?

_Daran_ ist nichts falsch.
Aber die Frage war nach einer Methode, um ein Bild vertikal auszurichten.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Daniel]

Hi,

Aber die Frage war nach einer Methode, um ein Bild vertikal auszurichten.

auch nicht ganz richtig, zum ausrichten wäre margin und padding ok, es soll aber vertikal zentriert werden.

[Marc Reichelt]

Hallo Daniel,

Aber die Frage war nach einer Methode, um ein Bild vertikal auszurichten.

auch nicht ganz richtig, zum ausrichten wäre margin und padding ok, es soll aber vertikal zentriert werden.

Du weißt ganz genau dass ich das meinte. ;-)

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Efchen]

ich hab hier son buch

Na, das sagt ja alles :-)

[Stan]

Na, das sagt ja alles :-)

Also wenn ich eins nicht leiden kann, dann is es so ein Arschloch wie du !!! nen forum is dazu da, dass da jeder was sagen kann und jeder von jedem lernt du spaten !!! und beleidigungen und ironie haben hier nix zu suchen .°)..|..

[Ashura]

Hallo Stan.

[...]

<°)))o><

Einen schönen Mittwoch noch.

Gruß, Ashura

[Marc Reichelt]

Hallo Stefan,

Keine dieser Eigenschaften gibt es in CSS.

hmmm ... nicht?! war das nur bei tabellen? .... na dann background-position: center center;
oder mit margin:wert; (margin-top, margin-bottom, margin-left, margin-right)
oder padding:wert;

Zitat Dieter Nuhr:
"Wenn man keine Ahnung hat, einfach mal die Klappe halten."

Das gilt auch für Postings.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Efchen]

Horizontal konnte ich es mit text-align:center; ausrichten. Nur die vertikale Ausrichtung klappt irgendwie nicht...

Dafür bedarf es auch ein Element vom Typ "table-cell" (Eigenschaft "display"). Aber rate mal, welcher Browser damit nicht umgehen kann!?

Ansonsten gibt es die zweifelhafte Lösung, ein Element erst relativ auf 50% von oben zu positionieren, und dann einen negativen Außenabstand in der Größe der Hälfte der Höhe des zu zentrierenden Elements zu vergeben. Ist das Element, in dem zentriert werden soll, jedoch kleiner als das zu zentrierende Element, rutscht es oben raus. Ist das ein Element, in dem gescrollt wird, ist dieser Inhalt unwiederruflich verloren, denn man kann nicht nach oben scrollen.

Alternativ...
a) Warum überhaupt ein div um ein vereinsamtes Image? Arbeite mit margin, padding, border, je nachdem, was Du vor hast.
b) Warum die Grafik nicht um den auf diese Weise erzeugten Rahmen erweitern?

[Peter]

a) Warum überhaupt ein div um ein vereinsamtes Image? Arbeite mit margin, padding, border, je nachdem, was Du vor hast.
b) Warum die Grafik nicht um den auf diese Weise erzeugten Rahmen erweitern?

a) Das DIV ist nur dazu da, einen Rahmen um das Bild zu schaffen. An die Möglichkeit, dem Bild selbst einen Rahmen zu geben, habe ich jetzt garnicht gedacht....

b) Die Grafik kann ja schlecht auf 9em erweitert werden. Ich habe leider vergessen zu erwähnen, dass es mehrere solche Grafiken bei mir gibt, diese allerdings unterschiedlich groß sind. Wenn ich nur mit margin und padding arbeite, habe ich da schon wieder ein Problem...

Die einzige Möglichkeit, die mir jetzt gerade in den Sinn kommt, ist, dass ich die Grafiken alle auf eine Größe bringe und dann mit margin und padding arbeite. Dann sollten die DIVs auch quadratisch und gleich groß´sein. Ist zwar bei 120 Stück nicht "mal eben" gemacht, aber was muss, das muss. Ich dachte, es gäbe eine einfachere Möglichkeit.

Danke trotzdem.

[Marc Reichelt]

Hallo Peter,

Die einzige Möglichkeit, die mir jetzt gerade in den Sinn kommt, ist, dass ich die Grafiken alle auf eine Größe bringe und dann mit margin und padding arbeite. Dann sollten die DIVs auch quadratisch und gleich groß´sein. Ist zwar bei 120 Stück nicht "mal eben" gemacht, aber was muss, das muss. Ich dachte, es gäbe eine einfachere Möglichkeit.

Wenn du viele Grafiken skalieren lassen willst geht das sehr schnell wenn es einmal automatisiert ist:
http://aktuell.de.selfhtml.org/tippstricks/grafik/thumbnails/index.htm

Das ist am Anfang vielleicht nicht so einfach zu verstehen, aber es lohnt sich - nach ein paar Stunden hat man den Dreh raus und kann äußerst schnell Thumbnails generieren lassen.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Peter]

Wenn du viele Grafiken skalieren lassen willst

Naja, mit skalieren ist es da nicht getan. Es muss quasi der weiße Rand vergrößert werden. Von daher ist die von dir genannt Möglichkeit für gewisse Dinge zwar interessant, für mich allerdings unbrauchbar.

Peter

[opi]

Hallo,

vertical-align scheint nur auf Tabellenelemente zu wirken.
Nun könntest du eine Tabellenspalte mit display:table-cell
bei einem DIV-Tag simmulieren, aber leider hat das keine
Auswirkung im IE.

Eine andere Möglichkeit für dich wäre eine echte Tabelle
statt des DIVs zu verwenden und mit vertical-align zu
arbeiten.

So hab ich es zumindest gelöst.

Greez,
opi

[Sven Rautenberg]

Moin!

vertical-align scheint nur auf Tabellenelemente zu wirken.

Stimmt nicht, vertical-align wirkt überall - nur außerhalb von Tabellenzellen anders, als innerhalb.

In Tabellenzellen ist die vertikale Ausrichtung auf die gesamte Zelle bezogen. Außerhalb wirkt die vertikale Ausrichtung auf die existierende Zeilenhöhe.

Mit anderen Worten: Große Schriftart (z.B. 30px) und kleines Bild (z.B. 10px hoch) lassen sich mit vertical-align ausrichten.

- Sven Rautenberg

[opi]

Hallo,

Moin!

vertical-align scheint nur auf Tabellenelemente zu wirken.

Stimmt nicht, vertical-align wirkt überall - nur außerhalb von Tabellenzellen anders, als innerhalb.

In Tabellenzellen ist die vertikale Ausrichtung auf die gesamte Zelle bezogen. Außerhalb wirkt die vertikale Ausrichtung auf die existierende Zeilenhöhe.

also... ich hab einfach mal überall ein vertical-align reingepackt...

1:1 Text

<table style="width:50%;height:50%;border:1px solid black;vertical-align:middle;">
   <tr>
      <td style="width:50%;height:100%;vertical-align:middle;text-align:center;border:1px solid green;">
         <div style="width:80%;height:30%;vertical-align:middle;text-align:center;border:1px solid red;">DIV DIV DIV</div>
      </td>
      <td style="width:50%;height:100%;vertical-align:middle;text-align:center;border:1px solid green;">
         TD TD TD TD
      </td>
   </tr>
</table>

Das schaut bei mir (IE 6.0) folgendermaßen aus:

--------------------------------------------------------------
|    -------------------        |                             |
|    |   DIV DIV DIV   |        |                             |
|    |                 |        |                             |
|    |                 |        |                             |
|    -------------------        |                             |
|                               |                             |
|                               |         TD TD TD TD         |
|                               |                             |
|                               |                             |
|                               |                             |
|                               |                             |
|                               |                             |
|                               |                             |
---------------------------------------------------------------

Im DIV-Element hat vertical-align nicht die geringste Auswirkung.
Auf der anderen Seite im Tabellenelement TD schon. Das DIV mag
zwar im Tabellenelement "drin stecken", aber vertical-align tuts
absolut nicht, also ist es meiner Ansicht so, das sich die vertikale
Ausrichtung nur auf Elemente auswirkt, die direkt im Tabellenelement
enthalten sind und nicht in irgendwelchen Unterelementen. Ich weiß
jetzt natürlich nicht, ob ich was in den Styles vergessen habe oder
ob sich dieses Problem nur auf DIV-Elemente bezieht.

Greez,
opi

[Sven Rautenberg]

Moin!

also... ich hab einfach mal überall ein vertical-align reingepackt...

Aber es nicht sachgerecht angewandt. :) Es ging ja um das zentrierte Ausrichten eines Bildes.

Den Effekt bemerkst du so:

<p style="font-size:100px;">Text <img src="irgendwas" width="10" height="10" style="vertical-align:middle; border:1px solid red"> Text</p>

Alternativ geht natürlich auch eine line-height für den Text, die größer als das Bild ist.

- Sven Rautenberg

[opi]

Hallo,

Moin!

also... ich hab einfach mal überall ein vertical-align reingepackt...

Aber es nicht sachgerecht angewandt. :)

schon gut, ich gebe zu, ein vertical-align im TD-Tag hätte
ausgereicht. Ich wollte es damit nur etwas hervorheben oder so
ähnlich :-)

Es ging ja um das zentrierte Ausrichten eines Bildes.

Mir ging es auch darum, aber insbesondere darum, dass vertical-align
nicht immer den gewünschten Effekt bringt wie zum Beispiel, wenn man
in einem DIV-Element ein Bild vertikal zentrieren möchte... was ja
mindestens nicht mit table-cell im IE funktioniert.

Den Effekt bemerkst du so:

<p style="font-size:100px;">Text <img src="irgendwas" width="10" height="10" style="vertical-align:middle; border:1px solid red"> Text</p>

Auf diese Lösung bin ich noch nicht gekommen und habs gleich mal
ausprobiert... auch eine gute alternative!

Greez,
opi