中心與CSS

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位於右側。

我的目標是對齊圖像中心的兩個文本，一個在小圖像的中心，另一個在大圖像的中心。

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/ < - 發現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>