CSS Text vertikal zentrieren

[achim89]

hi

ich hab folgende frage
wie kann ich einen text vertikal zentrieren, wenn sich noch ein weiteres element daneben befindet?

ich hab mal folgendes beispiel zusammgengestellt

Code: Alles auswählen

<div align="left" style="background-color: rgb(141, 182, 205); width: 100px; color: rgb(25, 25, 112); border: 1px solid rgb(25, 25, 112); padding: 5px; margin-top: 5px; margin-bottom: 5px; text-align: center; font-weight: bold;">
	<param value="http://www.youtube.com/v/3X4sO_yGV4A&hl=de_DE&fs=1&" name="movie" />
	<param value="true" name="allowFullScreen" />
	<param value="never" name="allowfoobar" />
	<embed width="30" height="25" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/3X4sO_yGV4A&hl=de_DE&fs=1&" allowfoobar="never" allowscriptaccess="never"></embed>
	<div style="width: 50px; float: right;" valign="middle">
		<marquee scrolldelay="1" scrollamount="2" valign="middle">
			Kent - Den d&ouml;da vinkeln
		</marquee>
	</div>
</div>

ich möchte, dass der Text genau vertikal mittig ausgerichtet ist, nur wie bekomm ich das hin?
ich hab wie man sehen kann auch versucht im div ein neues div zubeginnen, in der nur text steht
ich dachte somit könnte es funktionieren

ich bin ratlos
gibts da n trick?

[P7BB]

ich glaub, das war vertical-align:center; oder vertical-align:middle;
Bin mir aber nicht mehr genau sicher...

[achim89]

ich glaub, das war vertical-align:center; oder vertical-align:middle;
[...]

ja so hab ichs versucht einmal beim div u dann beim marquee auch nochmal des half leider nix. der text klebt nach wie vor oben =(

[gn#36]

Das vertikale Alignment ist leider nicht so einfach zu machen...

Die vertical-align Eigenschaft bezieht sich auf die Ausrichtung im Bezug auf eine Textzeile, nicht im Bezug auf den Bildschirm oder das Elternelement, das ganze verhält sich also somit etwas anders als die align Eigenschaft.

Siehe auch

• http://phrogz.net/CSS/vertical-align/index.html -- "How (not) to vertically center content"
• http://de.selfhtml.org/css/eigenschafte ... ical_align
• http://www.student.oulu.fi/~laurirai/www/css/middle/

[Talk19zehn]

Hallo achim89 und @ All,

wenn ich unter einer Grafik Text einfügen möchte, nutze ich einenTextabsatz. Warum sollte man das nicht versuchsweise zweckentfremden. Es müsste / sollte gehen? Validiert habe ich nicht…

Es käme auf einen Versuch an eine zentrierte Textausgabe, wie in Deinem Beispiel geschildert, unterhalb des Buttons mittels Textabsatz < p > unterzubringen. Die Textausgabe unterhalb der Grafik orientiert sich m. E. an der Breite der Grafik. Center benötigt ein wenig mehr Platz ( Breite ), die ich mittels einer kleiner gewählten Schriftgröße (0.9em ?) sicherlich noch anpassen kann?

Mein gedankliches Beispiel ( nur eine Idee ) anhand einer Grafik ohne weitere Schriftformatierungen usw. für den Textabsatz:
Breite willkürlich gewählt. Wahrscheinlich musst Du Deinen Code ergänzend ein wenig umbauen, teils anderweitig formatieren und verschachteln.


"Normalerweise"

Code: Alles auswählen

 
<div style="width: 140px;">
<img src="Bild.jpg" width="140px" height="25px" border="1" alt="...">
<p>
Zwei Worte:<br /> 
Noch mehr Text
</p> 
</div>

Ob Deine Angabe für das Beispiel bei Verwendung von Marquee funktioniert, kann ich jedoch nicht wirklich beurteilen. Mir ist lediglich im IE8 aufgefallen, dass die Bildschirmseite „zittert“ und mit jeden Neuladen eine Verzögerung ausgegeben wird. Ggf. wäre die Einbindung von Marquee entbehrlich? Ich könnte mir vorstellen, dass für den wenigen Text in Deinem Beispiel ein Lauftext nicht unbedingt erforderlich wäre / ist. Ein Blickfang lässt sich ganz bestimmt durch eine Schriftfarbe usw. herstellen.

Code: Alles auswählen

<p style="font-size: 0.9em; color: red;">
 

http://de.selfhtml.org/html/text/absaetze.htm
http://de.selfhtml.org/css/eigenschafte ... bstand.htm

################Text unterhalb einer Grafik bemisst sich m. E. an der Breite der Grafik################

Code: Alles auswählen

 
<div style="width: 134px;">
<div style="background-color: rgb(141, 182, 205); width="134px"; color: rgb(25, 25, 112); border: 1px solid rgb(25, 25, 112); padding: 5px; margin-top: 5px; text-align: center;">
   <param value="http://www.youtube.com/v/3X4sO_yGV4A&hl=de_DE&fs=1&" name="movie" />
   <param value="true" name="allowFullScreen" />
   <param value="never" name="allowfoobar" />
   <embed width="134px" height="25px" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/3X4sO_yGV4A&hl=de_DE&fs=1&" allowfoobar="never" allowscriptaccess="never"></embed>
   <p style="text-align:center;"><br />
Ein wenig Text<br /> 
Kent - Den d&ouml;da vinkeln ......</p>
</div></div>

Grüße, ich bin nicht fehlerlos