Question

I am looking for some html help. How would I go about moving a text block centrally within a cell but also keeping their alignment left intact. I do not wish the text to be displayed all centered as I am going to be using an unordered list. I simply want the block of text to be moved in to the center of the cell.

Example of current scenario:
http://jsfiddle.net/AygnN/

Answer 1

<table id="sub-content" style="width: 100%;">
  <tbody>
    <tr>
      <th>Departments</th>
      <th>KPI Types</th>
      <th>Bonus</th>
    </tr>
    <tr>
      <td>
        <ul>
          <li>dfgsdgfdfg</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>sdfgsdfgsdfg</li>  
        </ul>
      </td>
      <td>
        <ul>
          <li>sdgsdfgsdffgsdgf</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

If you have the <h1> tags as column headers, you should use actual table headers (<th> tags). Now, in the CSS you can say:

th { text-align:center; }

EDIT:

#sub-content td{ padding:0px 60px; }

and all table headers will be centered while all lists in the table will be aligned to the left.

This method is much more standard.

JSFiddle