how to set differents baseline for a text part in a table with css

Question

I wish to get something like that:

I have done many things, like changing Padding or line-height or even margin does nothing

"ROCKY" and "IV" are not on differents base lines...

Is it impossible to do ?

[edit] If it is possible to do a similar thing, without using an HTML table, I am a taker, even if it will force me to change a lot of things on my interface.

table {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      background: #FFA500;
      border: 1px solid #999;
      padding: 10px;
      box-shadow: 0 0 5px 3px #ccc;
    }
    thead {
      font-size: 40px;
      height: 100px;
    }
    thead td {
      white-space: nowrap;
      padding: 20px 10px;
    }
    span {
      font-size: 80px;
      font-weight: bold;
      padding-top: 40px
    }

<table>
    <thead>
      <tr>
      <td>
        ROCKY <span>IV</span>
      </td>
      </tr>
    </thead>
  </table>

try `vertical-align: -0.15em;` on the span (related : https://stackoverflow.com/a/57832839/8620333) — Temani Afif, Sep 11 '19 at 00:38
at the end you wanted to simply center the content, not only adjust the baseline ... in this case, it's a trivial duplicate — Temani Afif, Sep 11 '19 at 00:50
@TemaniAfif Using the negative vertical alignment is better ... I looked for this answer a few hours. Should I delete my message? — Mister Jojo, Sep 11 '19 at 01:01
you are not obliged but you need to be clear in the question to get better answers. vertical centring is different from changing the baselines. The first one is a paricular case of the last and it seems that you simply want to center the text. — Temani Afif, Sep 11 '19 at 01:06
vertical centering has been a problem because different cells in the array are also affected, and the same with colspan="x", that's a mess — Mister Jojo, Sep 11 '19 at 01:11

SMAKSS · Answer 1 · 2019-09-13T12:52:41.753

You can simply achieve what you wanted with using flexbox. All you need to do is adding display: flex; and align-items: center to your thead td and remove your padding-top: 40px; from span tag.

table {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      background: #FFA500;
      border: 1px solid #999;
      padding: 10px;
      box-shadow: 0 0 5px 3px #ccc;
    }
    thead {
      font-size: 40px;
      height: 100px;
    }
    thead td {
      display: flex;
      align-items: center;
      white-space: nowrap;
      padding: 20px 10px;
    }
    span {
      font-size: 80px;
      font-weight: bold;
    }

<table>
    <thead>
      <tr>
      <td>
        ROCKY <span>IV</span>
      </td>
      </tr>
    </thead>
  </table>

EDIT: if you want to be sure your other thead td does not affect by the display: flex and other stuff, you can simply add a class to your needed one such as below:

table {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      background: #FFA500;
      border: 1px solid #999;
      padding: 10px;
      box-shadow: 0 0 5px 3px #ccc;
    }
    thead {
      font-size: 40px;
      height: 100px;
    }
    thead td {
      white-space: nowrap;
      padding: 20px 10px;
    }
    span {
      font-size: 80px;
      font-weight: bold;
    }
    
    thead > tr > td.centering-span > span {
      vertical-align: middle;
    }

<table>
    <thead>
      <tr>
      <td class="centering-span" colspan="4">
        ROCKY <span>IV</span>
      </td>
      </tr>
    </thead>
        <tbody>
      <tr><td>0</td><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
  </table>

Finally I will not use this solution, it causes me worry about other cells in my table — Mister Jojo, Sep 11 '19 at 01:15
Could you share some illustration of what you exactly are worrying about? — SMAKSS, Sep 11 '19 at 01:27
@MisterJojo I think what you worried about is resolved in the edited answer. — SMAKSS, Sep 11 '19 at 01:35
@MisterJojo well, this is absolutely right, but `vertical-align: middle;` will work in this situation. So check the second post again to see the results. — SMAKSS, Sep 13 '19 at 12:54
Yes, it's better, but I find that the centered position is too high, and for just one wording, it's easier and more adjustable to use the negative vertical alignment. thank you for your effort (I learned a little thanks to you)! — Mister Jojo, Sep 13 '19 at 13:42

how to set differents baseline for a text part in a table with css

1 Answers1