Question

我的情况如下：

<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位于div的右侧位置。

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

Answer 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

Answer 2

水平对齐：

http://jsfiddle.net/JVqfM/

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

Answer 3

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

div {
    position: relative;
}

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

DEMO：http://jsfiddle.net/aanred/AjFur/

Answer 4

您也可以使用此方法（适用于现代浏览器**）

http://jsfiddle.net/zW47f/

http://jsfiddle.net/zW47f/1/＆lt; - 找到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中测试

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

居中<a> tag inside of an <img/> tag with CSS</a>

5 个答案: