Позиционирование изображения alt text

У меня есть большая таблица с большим количеством записей, соответствующих одинаково большому числу изображений. Требование состоит в том, чтобы отобразить текст alt для каждого изображения, которое невозможно найти на сервере. Атрибут alt работает нормально.

Тем не менее, я не могу позиционировать добавление текста, пробелов, полей и т.д., которые применяются к изображению, похоже, не применяются к тексту alt.

Может быть актуальным, что мы используем таблицы для компоновки страницы.

Кто-нибудь знает метод позиционирования текста alt?

Ответ 1

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

Устанавливает вертикальное и горизонтальное выравнивание по вертикали.

Ответ 2

Вы не можете. Никакой браузер, о котором я знаю, позволяет стилизовать представление атрибута alt.

Сложнее использовать язык на стороне сервера (например, PHP) для компоновки страницы, а не заставлять каждый браузер запрашивать потенциально несуществующие изображения. Таким образом вы можете просто вывести тег <img> или обычный абзац в зависимости от того, существует ли изображение.

Вы также можете написать функцию JavaScript (прикрепленную к событию onerror тега <img>), который заменяет его обычным текстом.

Ответ 3

Вы пытались применить дополнение или маржу к самому img, а не к table-cell? CSS, который вы используете в элементе IMG, также применяется к альт-тексту изображения. Поэтому, если вы установите

img { padding-left:30px; }

ваш альт-текст также попадает вправо на 30 пикселей (в зависимости от выравнивания текста и других вещей). Вы также можете захотеть позиционировать: относительный img или vertical-align it с соседней ячейкой (отношение важно) или просто что-то похожее на float, но позаботьтесь о том, что оно вытащит изображение из текстового потока, где он теряет макет-аспект отношений между родителями и детьми. Существует хороший ресурс для стилей CSS. Я не думаю, что вам нужно что-то вроде JavaScript (jQuery) или что-то в этом роде.

Ответ 4

line-height на родительском элементе повлияет на представление текста alt.

Ответ 5

Если вы хотите, чтобы изображение было выровнено по левому краю, но центрированный в нем текст alt не работал, но если оба изображения и текст alt должны быть выровнены по центру:

Попробуйте оставить атрибуты height и width на изображении (если вы включите их прямо сейчас). Это должно отображать ограничительную рамку только настолько большую, насколько это необходимо для текста alt, который может быть выровнен по центру по вертикали и по центру. В зависимости от того, на что вы хотите, чтобы ваш макет выглядел так, вы можете играть с ним, пока оба текста и изображения не выглядят прилично. Это самое лучшее, что вы можете сделать, действительно.