views:

504

answers:

1
+3  A: 

If you absolutely position the span.close, it won't take up space and your title should be perfectly centered:

tr td {
  position: relative;
}

tr td span.close {
  position: absolute;
  top: 0;
  right: 0;
}

Edit Whoops - never encountered that before. Normally a parent with position: relative will act as the coordinate system for a child with position: absolute, but not in the case of a <td>. If you wrap your title and span.close in a <div> with the following code you should be in business:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">

<html>
<head>
    <style>
        table {border: 1px solid black; width: 500px}  

        .title div {
           position: relative; 
           height: 40px; 
         }            

        td {text-align: center; border: 1px solid black}             

        td span.close {
          position: absolute;
          top: 0;
          right: 0;
        }
    </style>
</head>

<body>
     <table>
        <tr>
            <td class="title">  
              <div>Centered  <span class="close">XXXXX</span></div>  
            </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
</body>

Pat
This won't work unless the TD is absolutly positioned. Otherwise the "top:0 right:0" is ancored to the entire document: http://img196.imageshack.us/i/screenshot1kkn.png/
nbv4