Positionierung Bild alt Text

Question

Ich habe eine große Tabelle mit einer großen Anzahl von Einträgen entsprechend einer ebenso großen Anzahl von Bildern. Voraussetzung ist, dass für jedes Bild ein Alternativtext angezeigt wird, der auf dem Server nicht gefunden werden konnte. Das alt-Attribut von funktioniert gut.

Ich bin jedoch nicht in der Lage, den Alt-Text zu positionieren - Zellauffüllung, Abstände, Ränder usw., die auf das Bild zutreffen, scheinen nicht auf den Alt-Text anzuwenden.

Es kann von Bedeutung sein, dass wir Tabellen für das Layout der Seite verwenden.

Kennt jemand eine Methode, um den Alt-Text zu positionieren?

Answer 1

img { 
    width: 100px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
} 

Stellt die vertikale und horizontale Ausrichtung von ALT auf die Mitte ein.

Answer 2

Sie können nicht. Kein Browser, den ich kenne, erlaubt es, die Repräsentation des Alt-Attributs zu stylen.

Es erscheint sinnvoller, eine serverseitige Sprache (z. B. PHP) zu verwenden, um die Seite zu erstellen, anstatt jeden Browser dazu zu zwingen, möglicherweise nicht vorhandene Bilder anzufordern. Auf diese Art und Weise können Sie einfach ein Tag oder einen normalen Absatz ausgeben, abhängig davon, ob das Bild existiert.

Sie könnten auch eine JavaScript-Funktion schreiben (die an das onerror Ereignis des Tags angehängt ist), das sie durch einen normalen Text ersetzt.

Answer 3

Haben Sie versucht, Padding oder Rand auf das IMG selbst und nicht auf die Tabellenzelle anzuwenden? Das CSS, das Sie für Ihr IMG-Element verwenden, wird auch auf den Alt-Text des Bildes angewendet. Also, wenn Sie setzen ein

img { padding-left:30px; } 

Ihr Alt-Text wird auch von 30px nach rechts gedrückt zu werden (abhängig von text-align und anderen Sachen). Sie können auch positionieren: relativ die img oder vertikal-Ausrichtung mit einer Nachbarzelle (die Beziehung ist wichtig) oder etwas ähnliches wie float, aber darauf achten, ist, weil es das Bild aus dem Textfluss ziehen wird, wo es verliert den Layout-Aspekt von Eltern-Kind-Beziehungen. Es gibt eine nette resource für CSS Styles. Ich glaube nicht, dass Sie etwas wie JavaScript (jQuery) oder etwas ähnliches brauchen.

Answer 4

Die Zeilenhöhe eines übergeordneten Elements beeinflusst die Darstellung von alt-Text.

Answer 5

Wenn Sie das Bild oben links ausgerichtet werden, aber die Alt-Text zentriert das wird nicht funktionieren, aber wenn sowohl das Bild und Alt-Text sollte zentriert ausgerichtet werden:

Versuchen Sie, die height Weglassen und width Attribute im Bild (wenn Sie sie gerade einschließen). Das sollte eine Bounding-Box nur so groß wie notwendig für den Alt-Text machen, der vertikal in der Mitte und Text in der Mitte ausgerichtet werden kann. Je nachdem, wie Ihr Layout aussehen soll, können Sie damit umgehen, bis sowohl der Alt-Text als auch das Bild anständig aussieht. Das ist das Beste, was du tun kannst, wirklich.