Как выровнять по центру img обернутый в тег a?

Question

[lumb]

bootstrap 4

<a href="img.jpg" onclick="return hs.expand(this)" ><img class="img-fluid mx-auto d-block" src="imgsmall.jpg" alt="картинко" title="картинко"  /></a>

получается прижатым к левому краю

<img class="img-fluid mx-auto d-block" src="imgsmall.jpg" alt="картинко" title="картинко"  />

встаёт по центру

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

Answer 1

[Дмитрий]

тег center в помощь
htmlbook.ru/html/center

Comments

[lumb]

в bootstrap то? ну-ну

Answer 2

[Mikhail Derkach]

Display: block
Margin: 0 auto

Для img

Comments

[Антон Вебсайтовский]

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

[Mikhail Derkach]

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

размеры дочернего элемента должны ограничиваться размерами контейнера. В случае тега а, ему можно дать display block/inline-block, дать необходимые габариты, внутрь положить img, например, c

display: block;
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: contain;
object-position: center;