Как разместить гиперссылку над картиной с центром?

Question

Я пытаюсь получить гипер ссылку, чтобы быть центрированной над картиной. Я попытался использовать тег div класса, чтобы центрировать его, но они не будут разрешать пиксели.

<a href="ex.html"> HOMEPAGE </a><img src="1.jpg width="300" height="300" /> 

Это то, что он выглядит как после того как я запустить его:

Я хочу гиперссылка на линию в середине картины.

Answer 1

Если добавить text-align: center к элементу контейнера, вы получите то, что вы хотите:

<div style="text-align: center;"> 
 
    <a href="ex.html">HOMEPAGE</a><br /> 
 
    <img src="https://dummyimage.com/150x100/s7e/ffe" width="300" height="300" /> 
 
</div>

Answer 2

Контейнер, подход с CSS

CSS:

.imagecontainer { 
    width:300px; 
    text-align:center; 
} 

HTML

<div class="imagecontainer"> 
<a href="link"> 
Some text 
</a> 
<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Domestic_goat_kid_in_capeweed.jpg" width=300/> 
</div> 

JSfiddle

Answer 3

Попробуйте использовать элемент DIV, установив ширину в 300 пикселей так же, как изображение и CSS, чтобы выровнять ссылку центра:

<div> 
 
\t <div style="width: 300px; text-align: center"><a href="ex.html"> HOMEPAGE </a></div> 
 
\t <div><img src="1.jpg width="300" height="300" /></div> 
 
</div>