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

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

​