Позиционирование изображения и текста

Question

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

Однако я не могу расположить альтернативный текст - отступы, интервалы, поля и т. Д., Которые применяются к изображению, по-видимому, не применимы к альтернативному тексту.

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

высота строки родительского элемента повлияет на представление альтернативного текста.

Answer 4

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

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

Answer 5

Вы пытались применить отступ или margin к самому img, а не к ячейке таблицы? CSS, который вы используете в вашем IMG элементе, также применяется к альт-тексту изображения. Так что если вы установите

img { padding-left:30px; }

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