使用 CSS 在 <img> 标记内居中 <a> 标记答案

【问题标题】：Center an <a> tag inside of an <img> tag with CSS使用 CSS 在 <img> 标记内居中 <a> 标记
【发布时间】：2012-11-30 19:00:36
【问题描述】：

我的情况如下：

<table>
   <tr>
      <td>
         <div>
            <img src="xxx.png">
            <a>bla_bla1<a>
         </div>
         <div>
            <img src="yyy.png">
            <a>bla_bla2<a>
         </div>
      </td>
   </tr>
</table>

我想将文本（标签）对齐图像的中心。

谢谢。

编辑：一些额外的细节：

我有 2 张图片，一张小，一张大（如按钮）。小图在 div 的左边，大图在 div 的右边。

我的目标是将两个文本对齐在图像的中心，一个在小图的中心，另一个在大图的中心。

【问题讨论】：

你必须颠倒标签顺序，把<img>放在<a>里面
@Andy 为什么锚标签内的图片标签无效？ <!DOCTYPE html> <head> <title>ttt</title> </head> <body> <a href="#"><img src="tt.png" alt="tt"></a> </body> </html> 根据validator.w3.org 给出有效的html
@Andy - img 内的 a 导致无效的 html？我很确定这将使自 1994 年以来的每个网站
另外，将文本居中对齐？横向？

标签： html css button

【解决方案1】：

将position:relative 添加到 div 并将absolute 添加到标签

 a{
    position:absolute; 
    text-align:center; 
    width:100%;
    top:40%; left:0; 
    color:red; 
    font-size:25px;
}

DEMO

DEMO 2

【讨论】：

根据您的定位，它仅适用于示例文本。它不适合较短或较长的文本。
@Amberlamps 更新了答案。现在它也适用于更长的文本
我现在可以批准这个答案了 :)
@Sowmya，非常感谢，但我想要两张图片，一张更小，一张更大，一张靠近另一张（左边小，右边大），文字应该在里面每个图像的中心对齐
@Sowmya，谢谢，但链接似乎指向同一个地址。

【解决方案2】：

水平对齐：

http://jsfiddle.net/JVqfM/

div{float:left; width:auto;}
a{display:inline-block; width:100%; text-align:center;}

【讨论】：

【解决方案3】：

你的意思是你想要图片前面的文字？

div {
    position: relative;
}

a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}

演示：http://jsfiddle.net/aanred/AjFur/

【讨论】：

【解决方案4】：

你也可以使用这个方法（适用于现代浏览器**）

http://jsfiddle.net/zW47f/

http://jsfiddle.net/zW47f/1/ margin-top:-25%受文字宽度影响，所以改为-1em

css：

/* By adding position relative, overflow hidden and float left you definitely 
   force the browser to calc it's percentage positioning based on the div 
   not the td */
td div {
    overflow: hidden;
    position: relative;
    float: left;
    clear: both; /* <-- Remove if you want your divs to display inline */
}

/* By wrapping with a span you can shift elements twice, once to the middle */
td div span {
    display: block;
    left: 50%; top: 50%;
    position: absolute;
}

/* ... and once back with an offset based on the dimensions of the text */
td div span a {
    display: block;
    position: relative;
    left: -50%; /* <-- will work for any width of text < the div's width */
    margin-top: -1em; /* <-- this will only work for single lines of text */
}

标记：

<table>
  <tr>
    <td>
      <div>
        <img src="xxx.png" />
        <span><a>bla_bla1</a></span>
      </div>
      <div>
        <img src="yyy.png" />
        <span><a>bla_bla2</a></span>
      </div>
    </td>
  </tr>
</table>

** 表示我没有在 Internet Explorer 中测试过

【讨论】：

【解决方案5】：

<table>
   <tr>
      <td>
         <div align="center" style="float:left;  position:absolute;">
            <img src="xxx.png">
            <a>bla_bla1<a>
         </div>
         <div align="center" style="float:right;  position:absolute; ">
            <img src="yyy.png">
            <a>bla_bla2<a>
         </div>
      </td>
   </tr>
</table>

【讨论】：