[CSS] Tabellenzelleninhalt (Bild und nebenstehender Text) vertikal zentrieren

theHacker

theHacker

sieht vor lauter Ads den Content nicht mehr
Teammitglied
ID: 69505
L
20 April 2006
22.682
1.316
Ich weiß, es is Freitag Abend, aber entweder ich stell mich zu blöd, oder .... kp :mrgreen:

In meiner Tabelle möchte ich Bild und Text daneben vertikal zentriert haben.
vertical-align setzt mir aber nur Bild und Text als Einheit zentriert. Der Textbeginn ist aber immer auf derselben Höhe, wie das Bild.

Eine zweite Zelle kommt nicht in Frage, Bild und Text müssen in einer Zelle sein, logisch, wie auch programmiertechnisch.

Code: 
table {
  margin: 0px auto 10px auto;
}
table td {
  border: 1px solid red;
  width: 300px; height: 100px;
  vertical-align: middle;
}
table td img {
  width: 48px; height: 48px;
  float: left;
  padding: 5px;
}


In der einen Zelle hab ich rumgemalt, wie es sein sollte.
Was mach ich falsch ?
 
Gib dem <img> noch ein zusätzliches vertical-align: middle mit auf den Weg, dann sollte es funktionieren!



edit: Mist, jetzt hab ich mir so viel Mühe mit dem Smiley gegeben und dann ist da das PHP-Icon drin...also nimm den hier ;)


(Seit diesem Post benutze ich den "normalen" RTFM-Smiley nur ungern ;))

Gruß,
MrToiz

P.S.: Was ist eigentlich mit deinem Frontcontroller? Hatte in deinem Thread dazu noch was gepostet, aber du hast noch nicht geantwortet...
 
Zuletzt bearbeitet:
MrToiz schrieb:
Gib dem <img> noch ein zusätzliches vertical-align: middle mit auf den Weg, dann sollte es funktionieren!
Zum Vergrößern anklicken....
Tuts aber ned :p

Einen Unterschied macht es nur, wenn ich float für die Bilder nicht mehr verwende. Dann funktioniert es für die erste Textzeile richtig. Alle weiteren sind dann natürlich unter dem Bild, was ich überhaupt nicht will :-?

Bei den oberen 2 Zellen hab ich img { vertical-align: middle; } gesetzt, kein float bei allen:


@P.S.:
Ich wollte noch auf weitere Meinungen warten, drum hatte ich noch nichts geantwortet.
 
theHacker schrieb:
Tuts aber ned :p
Zum Vergrößern anklicken....
Stimmt :wall:

Hab gerade auch mal so ziemlich alle Varianten getestet (Bild und Text in eigene divs gepackt, Bild relativ positioniert, ...) aber is nix gescheites bei raus gekommen...
 
Dieses Prob hatte ich die Tage auch. Alles möglich probiert. Habe es letztendlich doch in eine zweizellige Tabelle gepackt. Ging mir zwar tierisch auf den Wecker...
 
Du musst einfach dummy ein Blockelement packen und diesem Element dann einen Abstand noch oben einräumen. Das funktioniert dann allerdings nur mit einer "festen" Schriftgröße.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de">
	<head>
		<style type="text/css">
		<!--
			table {
			  margin: 0px auto 10px auto;
			}
			table td {
			  border: 1px solid red;
			  width: 300px; height: 100px;
			  vertical-align: middle;
			  font-size:12px;
			}
			table td img {
			  width: 48px; height: 48px;
			  float: left;
			  padding: 5px;
			}
			table td h3 {
				margin:12px 0 0 0;
				font-size:12px;
			}
			
			-->
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
			</tr>
			<tr>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
			</tr>
			<tr>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
				<td><img src="dummy.png" alt="" /><h3>dummy</h3>xxxxxxxxxx</td>
			</tr>
		</table>
	</body>
</html>

HTH
 
Zuletzt bearbeitet:
perlini schrieb:
Mit span und display:block schon irgendwat probiert?
Zum Vergrößern anklicken....
Hab mit <p>s, <span>s und <div>s probiert. Ein <span> mit style="display: block;" is btw dasselbe, wie ein <div> ;)
Graccem schrieb:
Du musst einfach dummy ein Blockelement packen und diesem Element dann einen Abstand noch oben einräumen. Das funktioniert dann allerdings nur mit einer "festen" Schriftgröße.
Zum Vergrößern anklicken....
Nicht einer festen Schriftgröße, sondern einer konstanten Texthöhe und die ist nicht gegeben, da ich manchmal 2 Zeilen, manchmal aber auch 3 Zeilen Text brauche.
Außerdem will ich ja flexibel bleiben.
KeinKommentar schrieb:
Habe es letztendlich doch in eine zweizellige Tabelle gepackt. Ging mir zwar tierisch auf den Wecker...
Zum Vergrößern anklicken....
Das wäre meine letzte Lösung. Auch wenn ichs nur ungern mach, weil ich mir damit evtl. weitere Probleme auflad.

Ich schreib den Code zumindest jetzt mal so um und guck, wie ich weiterkomm.
Weitere Vorschläge sind natürlich jederzeit willkommen.
 
Ich mit meinem diesbezüglichen Kompetenzmangel stelle mich ja manchmal gar zu blöd an... Daher bin ich fast froh, daß auch andere an diesem Prob zu kauen haben.

Aber komisch ist das schon. Es muß da doch eine saubere Lösung geben! In 50 Datensätze eine zusätzliche zweizellige Tabelle einzufügen, weil man es im auslesenden php-code nicht gebacken bekommt - absolut zum Kotzen.

Drücke Dir die Daumen, daß wenigstens Du es hinbekommst.
 
theHacker schrieb:
Hab mit <p>s, <span>s und <div>s probiert. Ein <span> mit style="display: block;" is btw dasselbe, wie ein <div> ;)
Zum Vergrößern anklicken....
*hüstel Stimmt. :mrgreen:

Vielleicht das Bild als Hintergrundbild des <td> einbinden und dann das Bild über background-position zentrieren und den Text per padding-left entsprechend nach rechts verrücken? Nur ma so ohne zu testen geraten. :mrgreen:
 
perlini schrieb:
Vielleicht das Bild als Hintergrundbild des <td> einbinden und dann das Bild über background-position zentrieren und den Text per padding-left entsprechend nach rechts verrücken?
Zum Vergrößern anklicken....
Das könnte hinhauen.

Kommt allerdings auch nicht in Frage, weil ich das Bild als Tag brauche, weil es verlinkt und mit Transparenz belegt wird (siehe meine Kontaktseite, da hab ichs damals auch mit 2 Tabellenzellen gelöst).
 
theHacker schrieb:
Das könnte hinhauen.

Kommt allerdings auch nicht in Frage, weil ich das Bild als Tag brauche, weil es verlinkt und mit Transparenz belegt wird (siehe meine Kontaktseite, da hab ichs damals auch mit 2 Tabellenzellen gelöst).
Zum Vergrößern anklicken....
Wieder mal nur geraten:

Zurück zu span und display:block :mrgreen:
HTML: 
<a href="#" style="backround:url() no-repeat middle;display:block">text</a>

oder

HTML: 
<a><span>dhd</span></a>

und dann über :hover Transparenz (oder bild) ändern. Beim IE geht's dann halt nur über javascript.

N8
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben