Bild mit Text vertikal zentrieren
0 0 0 
Gunnar Bittersmann
0 0 
Patrick Andrieu
0 Patrick Andrieu
0 at
0
Bild mit Text vertikal zentrieren
Hallo zusammen
Ich habe ein Bild mit einer Höhe von 17px und möchte rechts daneben einen Text schreiben mit einer grösse von 11px. Nun soll der Text aber nicht unten ober oben vom Bild sein sondern genau vertikal zentriert.
hier etwas HTML Code
<img src="bild.gif" width="17" height="17"> ein Text
Was für ein Element (p, div, ...) und mit welchen CSS eigenschaften muss ich um das Bild und den Text legen?
Vielen Dank
mfg stefan
-
Mach doch einfach eine Tabelle mit zwei Zellen:
<table>
<tr>
<td>Hier ist das Bild</td>
<td>und hier der Text...</td>
</tr>
</table>-
Mach doch einfach eine Tabelle mit zwei Zellen:
<table>
<tr>
<td>Hier ist das Bild</td>
<td>und hier der Text...</td>
</tr>
</table>Ich möchte möglichst ohne Tabellen arbeiten.
-
-
Goeie More!
Da es Text ist, liegt es nahe, einen Textabsatz (p) zu verwenden. Das Bild kannst Du dann mit
vertical-align:middle;
im CSS vertikal zentrieren.Viele Grüße vom Længlich
-
Goeie More!
Da es Text ist, liegt es nahe, einen Textabsatz (p) zu verwenden. Das Bild kannst Du dann mit
vertical-align:middle;
im CSS vertikal zentrieren.Viele Grüße vom Længlich
Meinst du es etwa so?
<p style="vertical-align: middle; height:30px;"><img src="bild.gif"> der Text</p>So ist das Bild zwar in der mitte des p Elements aber der Text ist mit dem Bild unten bündig und da das Bild höher ist als der Text, ist der Text nicht absolut in der Mitte zum p Element.
-
Hello out there!
Das Bild kannst Du dann mit
vertical-align:middle;
im CSS vertikal zentrieren.Meinst du es etwa so?
<p style="vertical-align: middle; height:30px;"><img src="bild.gif"> der Text</p>
Nein, so nicht. Zum einen solltest du keine style-Attribute verwenden; eine Archivsuche nach "+author:gunnar +style-Attribut" sollte die Gründe liefern. Zum anderen wirkt die 'vertical-align'-Eigenschaft bei 'p' nicht: „Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [[CSS2 §10.8](http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.8%A0)] Sowohl Længlich als auch ich sprachen ja auch davon, das Bild auszurichten, nicht den Absatz. See ya up the road, Gunnar -- “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
Hello out there!
Ich habe ein Bild mit einer Höhe von 17px und möchte rechts daneben einen Text schreiben mit einer grösse von 11px.
Was nahezu unmöglich ist. Ich hab meinem Browser verboten, Text so klein darzustellen, dass ich ihn kaum lesen kann; meine Mindestschriftgröße ist deutlich größer als 11px.
Nun soll der Text aber nicht unten ober oben vom Bild sein sondern genau vertikal zentriert. […]
Was für ein Element (p, div, ...) und mit welchen CSS eigenschaften muss ich um das Bild und den Text legen?Gar keine. Du kannst das Bild <http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertikal mittig ausrichten>.
In einem Blockelement sollte der Text dennoch stehen, auch wenn das in den Transitional-Varianten nicht verlangt wird.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Gar keine. Du kannst das Bild <http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertikal mittig ausrichten>.
In einem Blockelement sollte der Text dennoch stehen, auch wenn das in den Transitional-Varianten nicht verlangt wird.
Ich möchte eigentlich möglichst auf Tabellen verzichten.
Wenn das Bild und der Text im gleichen BlockElement sind und ich es mit vertical-align ausrichte, ist das Bild schön in der Mitte aber der Text hängt am unterenen Rand des Bildes (ist also nicht absolut in der Mitte des Blockelements). -
Hallo Gunnar!
Was nahezu unmöglich ist. Ich hab meinem Browser verboten, Text so klein darzustellen, dass ich ihn kaum lesen kann; meine Mindestschriftgröße ist deutlich größer als 11px.
Ich musste meinem Browser nichts verbieten, denn ich habe mir vor 5 Jahren eine Lesebrille* kaufen müssen :) Dann konnte ich wieder die 13px-Schrift von Forum wieder lesen und den Schriftgrad des Browsers ändere ich jetzt nur noch zu Testzwecken.
Auch 11px sehe ich wieder gut (mag ich aber trotzdem nicht). 12 und 13 sind ok, bei Verdana und 13px ist der Zeilenabstand sogar angenehm.
Mittlerweile habe ich mehrere: für Printsachen eine etwas stärkere, eine noch etwas stärkere für den Fall, dass das Kleingedruckte Fliegenschiss ist (vor allem auf Verpackungen aller Art). Für die Arbeit am Bildschirm benutze ich die alte, dadurch dass ich mehr Abstand zum Monitor als zu einem Blatt Papier halte, reichen die schwächeren Gläser.
Ach ja: und mit einer ungeputzten Brille verliert man bis zu 2 Dioptrien!
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _-
Re!
Zum Thema große Schriften, kleine Schriften - und Brillen:
http://www.atomic-eggs.com/oae/oae_0.shtml
;)Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _ -
Hallo.
Auch 11px sehe ich wieder gut (mag ich aber trotzdem nicht). 12 und 13 sind ok, bei Verdana und 13px ist der Zeilenabstand sogar angenehm.
Das ist auch eine Frage der relativen Bildschirmauflösung.
MfG, at
-
-
-
Hallo Stefan,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> div, img, p { margin:0; padding:0; } div { } div img { display:block; float:left; } div p { font-size:11px; line-height:17px; } </style> </head> <body> <div><img src="Bild.png" alt="Bild" /><p>Text neben Bild</p></div> </body> </html>Das erreicht bei mir im Opera 9.01 den gewünschten Effekt. Andere Browser hab ich jetzt nicht getestet.
gruss,
OhneName-
Genau so hatte ich es mir gedacht. Vielen Dank
Das erreicht bei mir im Opera 9.01 den gewünschten Effekt. Andere Browser hab ich jetzt nicht getestet.
Unter Firefox 1.5 und IE 6.0 hat es auch den gewünschten Effekt.
-