html - CSSを使用してタグをタグの中央に配置します

Answer 1

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

デモ：http：//jsfiddle.net/aanred/AjFur/

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

**InternetExplorerでテストしていないことを意味します

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>