Vertikale Ausrichtung von text in Tabellenzellen

Wenn ich ein Bild platzieren, gefolgt von text in eine Tabelle Zelle, die vertikale Ausrichtung des Textes nach unten verschiebt im Vergleich zu text in angrenzende Zellen. Ich habe versucht, mit einem line-height CSS-Eigenschaft, aber es schien nicht zu wirken.

Im folgenden Beispiel brauche ich "123 Beschreibung" bündig mit "Zelle." Auch, es ist ein Leerzeichen zwischen dem Bild und "123" standardmäßig. Wie kann ich einstellen, dass negative Margen vielleicht?

<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        /* .adjust-text { line-height: 1.3em; } */
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>cell one</td>
                <td>
                   <img src="small-star.png" />
                   <span class="adjust-text">123 Description</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Hat eine von diesen Lösungen, die die Arbeit für dich, Robert?

InformationsquelleAutor Lightbeard | 2010-06-09

  1. 5

    Standardmäßig wird das Bild in einer Linie mit der Grundlinie des Textes, das ist in der Tat drängen der text in dieser Zelle nach unten. Um dies zu beheben, geben Sie an:

    td img { vertical-align: top; }

    Gibt es eine gute Zusammenfassung der CSS vertical-align hier.

    Entfernen Sie die Leerzeichen... entfernen Sie die Leerzeichen:

    <img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

    http://jsfiddle.net/s38Uv/

    Hinweis: Dies funktioniert auch, wenn Sie mit display:table-cell; div.

    InformationsquelleAutor Andrew

  2. 0

    Richten Sie das Bild mit der Zelle, versuchen Sie das Bild in eine css-Datei als Hintergrundbild. Passen Sie dann die y-position, den hintergrund mit background-position. Fügen Sie ein padding auf der linken Seite des Elements zum anzeigen der text rechts neben dem Bild.

    
        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        .image {
            background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
            background-position: 0 -2px;
            padding-left:20px;
        }
    
<span class="image">123 Description</span>

    InformationsquelleAutor Calvin

  3. 0
    <html>
<head>
<style type="text/css">
    table { border-collapse: collapse; }
    td { border: thin solid; width: 10em;}
    td { vertical-align: baseline;}
    td img { vertical-align:  middle;}
</style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>cell one</td>
            <td>
               <img src="small-star.png" />
               <span style="margin: 0 0 0 -5;">123 Description</span>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

    InformationsquelleAutor Chinjoo

  4. -1

    Haben Sie versucht, eine klassische vertical-align:middle? Sonst setzen Sie das Bild in eine eigene Zelle, oder lassen Sie die Ausrichtung auf Standard, und ändern Sie die padding-bottom der alle Ihre Zellen erhalten Sie auch die gleiche Sache.

    Das wird nicht funktionieren, schauen Sie, wie sein Beispiel macht, um zu sehen, was er spricht.
    Ähm ja. Ich sehe nicht, einen link irgendwo zu sehen, wie es 'macht' sozusagen. Wenn Sie einen vollständigen Pfad zu seinem Bild habe ich keine Idee...
    Er hatte es in seinem original-Beitrag: jsfiddle.net/s38Uv

    InformationsquelleAutor edl

Schreibe einen Kommentar