Maayan Blum Maayan Blum - 4 months ago 12
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!


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>