如何在居中的同时将超链接放在图片上方？

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一样，将链接与中心对齐：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;