html - 使用 CSS在标签内居中标签

Answer 1

添加position:relative到 div 和absolute标签

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

演示

---

演示 2

Answer 2

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

Answer 3

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

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 中测试过

Answer 4

水平对齐：

http://jsfiddle.net/JVqfM/

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

Answer 5

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

div {
    position: relative;
}

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

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