Văn bản thay thế hình ảnh định vị

Question

Tôi có một bảng lớn với số lượng lớn mục nhập tương ứng với số lượng lớn hình ảnh. Yêu cầu là hiển thị văn bản thay thế cho mọi hình ảnh không thể tìm thấy trên máy chủ. Thuộc tính alt đang hoạt động tốt.

Tuy nhiên, tôi không thể định vị văn bản thay thế - ô đệm, giãn cách, lề, v.v ... áp dụng cho hình ảnh dường như không áp dụng cho văn bản thay thế.

Có thể là mức độ liên quan mà chúng tôi đang sử dụng các bảng cho bố cục của trang.

Có ai biết phương pháp định vị văn bản thay thế không?

Answer 1

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

Đặt căn giữa theo chiều dọc và ngang.

Answer 2

Bạn không thể. Không có trình duyệt nào tôi biết về cho phép tạo kiểu cho biểu diễn thuộc tính alt.

Có vẻ hợp lý hơn khi sử dụng ngôn ngữ phía máy chủ (ví dụ: PHP) để soạn trang thay vì buộc mỗi trình duyệt yêu cầu các hình ảnh có khả năng không tồn tại. Bằng cách này, bạn chỉ có thể xuất ra một thẻ <img> hoặc một đoạn thông thường tùy thuộc vào việc hình ảnh có tồn tại hay không.

Bạn cũng có thể viết hàm JavaScript (được đính kèm với sự kiện onerror của thẻ <img>) thay thế bằng văn bản thông thường.

Answer 3

Bạn đã cố gắng áp dụng đệm hoặc lề cho chính bản thân chứ không phải vào bảng ô? CSS bạn sử dụng trên phần tử IMG cũng được áp dụng cho văn bản thay thế của hình ảnh. Vì vậy, nếu bạn đặt một văn bản thay thế cho văn bản

img { padding-left:30px; } 

alt của bạn cũng bị đẩy sang bên phải 30px (tùy theo căn chỉnh văn bản và nội dung khác). Bạn cũng có thể muốn định vị: liên quan đến img hoặc dọc căn chỉnh nó với một ô lân cận (quan hệ là quan trọng) hoặc chỉ một cái gì đó tương tự như float nhưng chăm sóc là vì nó sẽ kéo hình ảnh ra khỏi luồng văn bản mất khía cạnh bố cục của quan hệ cha-con. Có một kiểu dáng đẹp resource cho Kiểu CSS. Tôi không nghĩ rằng bạn cần bất cứ điều gì như JavaScript (jQuery) hoặc một cái gì đó như thế.

Answer 4

chiều cao dòng trên phần tử gốc sẽ ảnh hưởng đến việc trình bày văn bản thay thế.

Answer 5

Nếu bạn muốn hình ảnh được sắp xếp trên bên trái nhưng alt văn bản làm trung tâm này sẽ không làm việc, nhưng nếu cả hai hình ảnh và alt văn bản nên được sắp xếp làm trung tâm:

Cố gắng bỏ đi height và width thuộc tính trong hình ảnh (nếu bạn đang bao gồm chúng ngay bây giờ). Điều đó sẽ làm cho một hộp giới hạn chỉ lớn khi cần thiết cho văn bản thay thế, có thể được canh giữa theo chiều dọc và căn giữa. Tùy thuộc vào những gì bạn muốn bố trí của bạn trông giống như bạn có thể fiddle xung quanh với nó cho đến khi cả văn bản và hình ảnh alt trông khá. Đó là về điều tốt nhất bạn có thể làm, thực sự.