Problem mit der vertikalen Ausrichtung von Tabellenzellen

Question

Ich habe float für eine der Zellen meiner Tabelle festgelegt.Aber jetzt kann ich die vertikale Ausrichtung des Inhalts nicht ändern.Standardmäßig wird der Inhalt an den Anfang des divs verschoben.Ich habe valign: middle, vertical-align: middle ohne Erfolg ausprobiert.Hier sind die Ergebnisse:

Mit float: left

Ohne float: left

Wie kann ich den Inhalt einer Zelle vertikal mit float ausrichten? Und Markup sieht so aus

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

Answer 1

Ich weiß nicht, ob dies helfen wird (ich habe jetzt tabellenbasierte Layouts hinter mir gelassen), aber um ein ähnliches Problem mit geraden divs zu lösen, können Sie dasselbe mit der line-height-Regel tun.

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

Ihr CSS wird erstellt, um Breiten / Höhen usw. festzulegen, die Sie vermutlich nicht für eine Tabelle benötigen, und für Ihre "rechte Zelle" würden Sie die Zeilenhöhe so einstellen, dass sie der Zeilenhöhe entspricht:

#rightCell
{
    height: 30px;
    line-height: 30px;
}

Dann wird der Text vertikal im Zeilenbereich zentriert, was den Eindruck erweckt, dass er sich auch in der Mitte des Elements befindet, da er der Höhe entspricht.

Nun, wie ich schon sagte, ich habe dies NIE in einer Tabellenzelle versucht. In jedem modernen Browser sollten Sie jedoch die Anzeigeeigenschaft so ändern, dass sie block oder inline-block lautet, indem Sie Folgendes verwenden:

display: block;

Ändern des Blocks für einen der anderen Typen, falls erforderlich. Dadurch wird der Anzeigetyp der Zelle so eingestellt, dass er einem generischen Codetagcode (oder einem Bereich oder einem anderen Element) ähnelt, aber ich weiß nicht, welche Auswirkungen dies auf die Tabelle haben wird.

Beachten Sie auch, dass ich ältere Browser wie IE6 hier nicht anspreche. Damit dies auf der ganzen Linie funktioniert, müssen Sie möglicherweise einige Hacks für ältere Browser durchführen, wenn Unterstützung erforderlich ist.