webentwicklung-frage-antwort-db.com.de

So richten Sie Bild und Text vertikal aus TD Element?

<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

So sieht es aus:

http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif Mein Feed

Das Symbol und der Text sind vertikal falsch ausgerichtet. Das Symbol befindet sich oben in der Tabellenzelle, der Text unten. Sowohl der Text als auch das Symbol belegen 16 Pixel, aber die Zelle ist immer noch voll 19. Wie kann ich sie ausrichten, um diese 3 Pixel zu speichern?

htmlalignmenthtml-table
15
Mr. Lame

Wenn Sie die Hintergrundbildmethode wählen, ist dies sehr einfach:

background: url(feed.png) left center no-repeat
18
Joey

Das Bild wird an der Grundlinie des Textes ausgerichtet. Dies beinhaltet nicht die Abstiegshöhe, bei der es sich um das "Häkchen" in Buchstaben wie g oder y handelt.

Wenn die Höhe der Zeile/Zelle festgelegt werden soll, können Sie die Zeilenhöhe hinzufügen, um sie vertikal zu zentrieren. Angenommen, Ihre Zelle ist 16px hoch:

td.feed {
    line-height:16px;
}

Die andere Option wäre, das Symbol als Hintergrundbild hinzuzufügen und der Zelle links eine Auffüllung hinzuzufügen:

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

Die zweite würde bedeuten, dass Sie überhaupt keine Tabellen mehr benötigen, jetzt gibt es eine Idee ...

9
roryf

Andere Antworten, die besagen, dass das Bild nicht Teil des Inhalts sein sollte, dienen lediglich der Dekoration, was umstritten ist. Ich glaube, Sie sollten Ihrem Bild ein leeres alt-Attribut hinzufügen, damit Bildschirmleser das Bild ignorieren können, wenn Sie Ihre aktuelle Methode beibehalten.

Die vertical-align-Eigenschaft ist die Eigenschaft, die Sie hier verwenden müssen, aber Sie möchten text-bottom verwenden. Ich werde auch davon ausgehen, dass Sie dies als Link verwenden möchten. Hier ist ein vollständiger Codebeispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>garethjmsaunders.co.uk</title>
    <style type="text/css">
    a { text-decoration: none; }
    a img { border: 0; vertical-align: text-bottom; }
    </style>
  </head>
<body>
<table>
<tr>
<td>
  <a href="" title="garethjmsaunders.co.uk rss feed">
    <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
    My feed
  </a>
</td>
</tr>
</table>
</body>
</html>

Wenn dies immer noch nicht wünschenswert ist, können Sie mit line-height und anderen Werten für vertical-align experimentieren, um herauszufinden, welche für Sie am besten geeignet sind.

6
cowgod

Was ist daran falsch, ein Hintergrundbild zu erstellen?

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
2
Ms2ger

versuchen Sie einfach "vertikal-align: middle" am IMG-Tag, danach können Sie auch die Auffüllung für TD einstellen

1
Joey

Versuche dies:

<td>
   <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
   <span class="feedTxt">My feed</span>
 </td>

 .feedTxt { line-height: 20px; } /* Or whatever the height of the image is.  Adjust as needed. */
1
Bryan A

Sie könnten position: relative; top: 3px; mit dem <img>-Tag ausführen. Sie könnten auch vertical-align: middle; mit dem <td>-Tag versuchen, aber ich denke nicht, dass es richtig funktioniert, da ich mir ziemlich sicher bin, dass ich das schon vorher gesehen habe. Sie können sie auch in separate <td>-Tags einfügen, aber das ist eine Art No-No.

0
Paolo Bergantino

Ich würde die zwei Elemente (Bild und Text) in ihre eigenen separaten Tabellenzellen einfügen. Sie könnten einen anderen Tisch verschachteln. Das ist ein guter Anfang. Dann könntest du mit Padding etc. rumspielen, um dich anzupassen.

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
0
alex

Ich habe die Hintergrundbildmethode ausprobiert, aber es gefiel mir nicht so sehr ...

In der CSS ...

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

In der Seite ...

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • Spielen Sie mit dem Attribut "top" , um den Text/das Etikett nach oben und unten zu verschieben.
  • Spielen Sie mit dem Attribut padding , um den horizontalen Abstand zwischen dem Symbol und dem Text/Label zu ändern.
  • Sie sollten dies in allen Browsern überprüfen, die Sie betreffen, da diese mit geringfügigen Unterschieden gerendert werden können.
0
sugardaddy