Inhalt von li Elementen vertikal zentrieren

[redbird]

Hallo,

atm modifiziere ich das Theme des PunBB ein wenig, allerdings auf Basis des Standardthemes auf http://punbb.informer.com/forums/ .

Nun möchte ich in der Übersicht das Icon, den Forenname/beschreibung, Themenanzahl, Postanzahl, Last Post in der Forenübersicht vertikal zentriert ausrichten.

Die HTML-Ausgabe sieht z.B. so aus:

<div id="forum64" class="main-item odd">  
			<span class="icon "><!-- --></span>  
			<div class="item-subject">  
				<h3 class="hn"><a href="http://punbb.informer.com/forums/forum/64/punbb-13-troubleshooting/"><span>PunBB 1.3 troubleshooting</span></a></h3>  
				<p>Any issues related to PunBB 1.3? Solve them here. <span class="modlist">(Moderated by ...>)</span></p>  
  
			</div>  
			<ul class="item-info">  
				<li class="info-topics"><strong>818</strong> <span class="label">topics</span></li>  
				<li class="info-posts"><strong>4,825</strong> <span class="label">posts</span></li>  
				<li class="info-lastpost"><span class="label">Last post:</span> <strong><a href="#">Yesterday 11:18:11</a></strong> <cite>by Ifadah</cite></li>  
  
			</ul>  
		</div>

Die CSS-Dateien findet man hier:
http://punbb.informer.com/forums/style/Oxygen/Oxygen.css
http://punbb.informer.com/forums/style/Oxygen/Oxygen_cs.css

Vertikal-align scheint ja nicht zu funktionieren, da Blockelement. Ich möchte auch keine Änderung vornehmen, die sich nicht auf die CSS-Dateien beschränken.

Ich würde mich sehr freuen, wenn mir da jemand helfen könnte.

Gruß
redbird

[Candid Dauth]

Heißa, redbird,

Vertikal-align scheint ja nicht zu funktionieren, da Blockelement.

Vertical-align funktioniert auch mit Blockelementen genauso wie sonst: Es bestimmt, wie Text innerhalb seiner Zeile ausgerichtet wird (im Gegensatz zum „HTML“-Attribut valign, vermutlich).

Für einzeiligen Text ist deshalb deine Lösung, die Zeilenhöhe so zu vergrößern, dass sie der Höhe einer Zeile dessen, was so aussieht wie eine Tabelle, entspricht und dann mit vertical-align:middle; zentrierst. Für Bilder bekannter Höhe lautet die Lösung, diese mittels margin-top in die Mitte der Zeile zu verschieben. All das setzt jedoch voraus, dass du die Höhe der Zeile kennst.
Für mehrzeiligen Text oder für den Fall, dass du die Höhe der Zeile nicht kennst, ist mir keine Lösung bekannt.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[redbird]

Zunächst danke für die schnellen Antworten.

Leider kann in diesem Fall nicht klar vorhergesagt werden, wieviele Zeilen Text in den jeweiligen Zellen erscheint, da das je nach Modifikation anders sein kann. Dementsprechend variieren auch die Höhen der Zeilen/Zellen. Atm benutze ich padding, um einen Abstand zu schaffen, was natürlich keine gute Lösung ist.

Gruß
redbird

[Gunnar Bittersmann]

@@redbird:

nuqneH

Vertikal-align scheint ja nicht zu funktionieren, da Blockelement.

'vertical-align' funktioniert aber bei 'table-cell'-Elementen.

Qapla'