Pozycjonowanie obrazu tekst alternatywny

Question

Mam dużą tabelę z dużą liczbą wpisów odpowiadającą równie dużej liczbie obrazów. Wymagane jest wyświetlenie tekstu alternatywnego dla każdego obrazu, którego nie można znaleźć na serwerze. Atrybut alt działa poprawnie.

Jednak nie jestem w stanie ustawić tekstu alternatywnego - dopełnienie komórek, odstępy, marginesy itp., Które odnoszą się do obrazu, nie wydają się dotyczyć tekstu alternatywnego.

Może być istotne, że używamy tabel do układu strony.

Czy ktoś zna metodę pozycjonowania tekstu alternatywnego?

Answer 1

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

Umożliwia ustawienie wysokości pionowej i poziomej alt na środku.

Answer 2

Nie możesz. Żadna przeglądarka, której znam, nie pozwala na styl reprezentacji atrybutu alt.

Bardziej sensowne wydaje się użycie języka po stronie serwera (np. PHP), aby skomponować stronę, zamiast zmuszać każdą przeglądarkę do żądania potencjalnie nieistniejących obrazów. W ten sposób możesz po prostu wydrukować znacznik <img> lub zwykły akapit w zależności od tego, czy obraz istnieje.

Można również napisać funkcję JavaScript (dołączony do zdarzenia onerror znacznika <img>), który zamienia go ze zwykłym tekstem.

Answer 3

Czy próbowałeś zastosować dopełnienie lub margines do samego pliku img, a nie do komórki tabeli? CSS, którego używasz na swoim elemencie IMG, jest również stosowany do alt-text obrazu. Więc jeśli ustawić

img { padding-left:30px; } 

Twój alt-text jest również wciśnięty w prawo przez 30px (w zależności od text-align i inne rzeczy). Możesz także chcieć ustawić: względną img lub pionową-wyrównanie do komórki sąsiedniej (relacja jest ważna) lub po prostu coś podobnego do float, ale zajmij się tym, ponieważ spowoduje to przeciągnięcie obrazu poza tekst, gdzie jest traci układ-aspekt relacji między rodzicami i dziećmi. Jest ładny resource dla stylów CSS. Nie sądzę, że potrzebujesz czegoś takiego jak JavaScript (jQuery) lub coś podobnego.

Answer 4

wysokość linii elementu nadrzędnego wpłynie na prezentację tekstu alternatywnego.

Answer 5

Jeśli obraz ma być lewy górny wyrównane ale tekst alt centered to nie będzie działać, ale jeśli zarówno obrazu i alt Tekst powinien być wyrównany skupione:

Spróbuj pomijając height i width atrybuty obrazu (jeśli je teraz uwzględnisz). To powinno uczynić ramkę ograniczającą tylko tak dużą, jak jest to konieczne dla tekstu alternatywnego, który może być wyrównany do środka w pionie i wyrównany do tekstu w środku. W zależności od tego, jak ma wyglądać twój układ, możesz nim manipulować, dopóki tekst alternatywny i obraz wyglądają przyzwoicie. To naprawdę najlepsze, co możesz zrobić.