Html img alt center

Positioning image alt text

I have a large table with a large number of entries corresponding to an equally large number of images. The requirement is to display an alt text for every image which could not be found on the server. The alt attribute of is working fine. However, I am not able to position the alt text — cell padding, spacing, margins etc. which apply to the image do not seem to apply to the alt text. It may be of relevance that we are using tables for the layout of the page. Does anybody know a method to position the alt text?

6 Answers 6

Sets the alt vertical and horizontal align to middle.

I see this answer everywhere on the internet but it doesn’t work. Is this because browsers have changed since 2014? Or is it only me who can’t get it running?

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

The line-height property on a parent element will affect the presentation of the alt attribute text.

If you want the image to be top-left aligned but the alt text centered this won’t work, but if both the image and alt text should be aligned centered:

Try leaving out the height and width attributes in the image (if you’re including them right now). That should render a bounding box only as big as necessary for the alt text, which can be center aligned vertically and text-aligned middle. Depending on what you want your layout to look like you can fiddle around with it until both the alt text and image looks decent. That’s about the best you can do, really.

Did you try to apply padding or margin to the img itself and not to the table-cell? The CSS you use on your IMG Element is also applied to the alt-text of the image. So if you set a

your alt-text is also getting pushed to the right by 30px (depending on text-align and other stuff). You may also want to position:relative the img or vertical-align it with a neighbor-cell (the relation is important) or just something similar like float but take care of is because it will drag the image out of the textflow where it loses the layout-aspect of parent-to-child relations. There is a nice resource for CSS Styles. I don’t think you need anything like JavaScript (jQuery) or something like that.

Источник

Как выровнять HTML изображение по центру

Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.

В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.

Центрирование в параграфе

В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.

  
 
 .aligncenter 

Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

Центрирование при помощи отступов

Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.

  
 
 .marginauto 

Центрирование при помощи тега

Следует помнить, что тег является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

Нам не хотелось бы использовать устаревшие элементы в статье, поэтому здесь нет демонстрации этого примера, только код.

Центрирование при помощи атрибута align=middle

Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».

Выравнивание изображения по центру по вертикали

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

Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.

  
 
 .verticalcenter 

Одновременное центрирование по горизонтали и по вертикали

Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.

  
 
 .verticalhorizontal 

Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.

Источник

Как центрировать изображение в HTML

В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 22 118.

Атрибут align тега считается устаревшим с появлением HTML5. Хотя этот атрибут по-прежнему работает в большинстве веб-браузеров, рекомендуется выравнивать изображения с помощью каскадных таблиц стилей (CSS). В этой статье мы расскажем вам, как центрировать изображения с помощью CSS и устаревшего тега align .

CSS (рекомендуется)

Добавьте HTML-код для изображения. Для выравнивания картинки вы воспользуетесь каскадными таблицами стилей (CSS), но разместить ее на странице придется с помощью HTML. Далее приведен пример использования тега для вставки изображения в код: [1] X Источник информации

img src="dog.jpg" alt="это картинка собаки" class="center"> 

• Вместо dog.jpg подставьте название файла картинки, а после «alt» введите описание изображения. Значение center для «class» не меняйте, потому что вы создадите CSS-класс с этим именем.

Добавьте в CSS код для выравнивания картинки. Вместо «50%» можно ввести другое значение, чтобы изображение появилось на странице. Отцентрировать изображение со значением «100%» не получится, поэтому это число должно быть другим.

.center  display: block; margin-left: auto; margin-right: auto; width: 50%; > 

Сохраните внесенные изменения. Сохраните HTML-файл и CSS-файл (если он есть). Так вы отцентрируете изображение.

• Также внутри тегов можно добавить class=»center» , чтобы отцетрировать другие изображения.

Атрибут «align» в HTML

Создайте новый абзац. Хотя данный метод центрирования изображений считается устаревшим, он все еще работает во многих браузерах. Однако мы рекомендуем использовать CSS, чтобы сайт функционировал, когда браузеры прекратят поддерживать указанный атрибут. Помните, что атрибут align отцентрирует картинку только внутри элемента, который ее окружает (например, внутри тегов или ). [2] X Источник информации В качестве примера в HTML-файле мы создадим новый абзац, добавив

на отдельной строке.

Добавьте HTML-код для изображения. Введите следующий код после тега

. Используйте этот пример в качестве руководства:

p>img src="dog.jpg" alt="картинка" align="middle"> 

• Вместо dog.jpg подставьте название файла картинки, а после «alt» введите описание изображения.
• Атрибут «middle» сообщает браузеру, что картинку нужно отобразить в центре страницы. [3] X Источник информации

Закройте тег абзаца. Для этого добавьте

после тега картинки. Готовый код должен выглядеть примерно так:

p>img src="dog.jpg" alt="картинка" align="middle">p> 

Источник

Как поставить иконку по центру img?

При наведении на на картинку должен появляться глаз как на макете, что только не пробовал, но никак не могу понять как это сделать, будь это просто бэкграунд было бы проще в разы, а тут img тэг и тэг i. p.s использую font-awesome

.work-cards-img < min-width: 337px; height: 100%; >.fa-eye < color: rgb(0, 0, 0); font-size: 50px; align-self: center; position: relative; >.work-cards

1 ответ 1

Я бы не рекомендовал устанавливать position: relative элементом,у которых display: inline . Плюс у самих font-awesome элементы i::before тоже position: relative .

.work-card < width: 200px; height: 150px; display: inline-block; >.work-card img < width: 200px; height: 150px; object-fit: cover; >.fa-eye < display: block; color: #fff; text-shadow: 2px 2px 1px #000; font-size: 50px; position: relative; z-index: 2; transform: translate(-50%, -50%); left: 100px; top: 70px; >.fa-eye::before < display: none; >.work-card:hover img < margin-top:-50px; >.work-card:hover .fa-eye < line-height:50px; >.work-card:hover .fa-eye::before < display: block; >.work-cards

Источник