如何对齐 Link HTML/CSS

Question

我已尝试执行以下操作，以及仅对 <a> href 和 <img> 标签使用对齐，但我仍然无法将可点击的图像与页面中心对齐.

<a href="next.html" align="middle">
   <img src="tlbr.png" align="middle">
</a>

浮动标签在我尝试过的任何方式下也不起作用，因为据我所知，没有办法浮动到中心。

任何直接在 HTML 或 CSS 中的解决方案都很棒。谢谢。

Answer 1

将 display: block; text-align: center; 添加到 href link。并尝试。

Answer 2

将此代码添加到您的 CSS:

a img{
   display: block;
   text-align: center;
}

JSFIDDLE DEMO

Answer 3

查看演示并像这样尝试：Demo

a img {
   margin:0 auto;    
   display:block;
}

Answer 4

首先，您应该为 a 元素设置宽度和显示，它们会显示 img 字样并使用 margin: 0 auto 将图像设置在中心：

<a href="#" align="middle" style="width: 100%; display: block; background: #ccc;">
   <img src="http://caster.ir/public/images/logo.png" align="middle" style="display: block; margin: 0 auto;">
</a>

Answer 5

<img> 标签 align 属性使图像相对于直线垂直对齐。 <a> 标签无法识别对齐属性。

如果您尝试将图像水平居中，那么您可能想尝试使用以下方法：

<a href="next.html">
   <img id="myImg" src="tlbr.png" />
</a>

然后在您的 CSS 样式表中：

#myImg {
   margin-left: auto;
   margin-right: auto;
}

希望对您有所帮助。

Answer 6

或者您可以添加一个 <p> 标签，然后对齐它。例如：

<a href="link.com">
   <p align="center">Hello World!</p>
</a>

如何对齐 Link HTML/CSS

How to Align a Link HTML/CSS

html

css

alignment