CODEWITHSUNDEEP
htmlcss
ZL3909
ZL3909

Reputation: 13

How to place a Hyperlink above a picture while centered?

I've been trying to get a hyper link to be centered above a picture. I tried using a div class tag to center it, but they won't allow pixels. 

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

This is what it looks like after I run it:

screenshot

I want the hyperlink to line up in the middle of the picture.

Upvotes: 1

Views: 41

Answers (3)

Romeo Gresta
Romeo Gresta

Reputation: 116

Try using the element DIV, setting the width to 300 pixels just like your image and CSS to align the link to center:

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

Upvotes: 0

Devian
Devian

Reputation: 827

A Container Approach with 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

Upvotes: 1

Dekel
Dekel

Reputation: 62596

If you add a text-align: center to the container element you will get what you want:

<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>

Upvotes: 2

Related Questions