Maayan Blum Maayan Blum - 3 months ago 16
CSS Question

Make CSS `text-align:center` Ignore Some Text

Here is what I've tried:



table {
width: 100%;
}

td {
text-align: center;
}

td > h4 {
display: inline
}

<table>
<td>
<h4>Hello</h4><sup>World</sup>
</td>
</table>





Unfortunately, the browser centers both "Hello" and "World" together. How can I center ONLY "Hello" (but still have "World" follow it)?

Answer

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;
}
<table>
  <tr>
    <td>
      <h4 style="display: inline;">Hello</h4><sup>World</sup>
    </td>
  </tr>
</table>

Comments