html - 在 HTML 页面中居中带有图像的链接

Question

我正在尝试将图像居中链接内：

<a href="URL">
   <img class="my_class" src="SRC" />
</a>

CSS看起来像：

.my_class
{
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我的问题是可以在特定高度的页面的整个宽度上按下链接，而不仅仅是在我的图像上。此外，我的应用程序需要同时处理两个方向：dir:"rtl"和dir:"ltr"

score 3 · Accepted Answer

像这样

HTML

<a href="URL" class="my_class">
   <img src="SRC" />
</a>

CSS

a {
    text-align:center;
}
.my_class {
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

CSS

   iframe, body{
    margin:0;
    padding:0;
    text-align:center;
}

score 2 · Accepted Answer

只是把width和height财产。

width: 200px; height: 150px; /*Example*/

score 0 · Accepted Answer

a {
   text-align: center; 
}

并删除这个：位置：相对；显示：块；左边距：自动；边距右：自动；

score 0 · Accepted Answer

我宁愿将它包装在这样的容器中：

<div class="my_class"><a href="#"><img src="src.png" /></a></div>

的 CSSmy_class将保持不变。

score 0 · Accepted Answer

我认为很多左右填充会解决你的问题

喜欢

a{
width:1000px;
background:red;
padding:10px 250px 10px 250px;
}

5 回答 5