Maayan Blum Maayan Blum -4 years ago 233
CSS Question

css text-align:center to ignore <sup>

i have a table, each of its td's has text-align:center;.
then i have this:

<td><h4 style="display: inline;">Hello</h4><sup>World</sup></td>

unfortunately when centering the text, the browser takes into account both "Hello" and "World" which is inside a sup tag.
what i want is the "Hello" to be aligned to the center and the "World" to follow it but not be taken into account when positioning the "Hello" at the center.
thanks in advance!

Answer Source

Here is some very simple CSS:

sup {
  display: inline-block;
  width: 0px;

The idea is to force a width of 0, but allow it to overflow. (You can't set a width on an inline element, so we use inline-block instead)

You can see the full example in a snippet below:

table {
  width: 100%;

td {
  text-align: center;

/* Relevant CSS */
sup {
  display: inline-block;
  width: 0px;
      <h4 style="display: inline;">Hello</h4><sup>World</sup>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download