Horizontal align on parts of an element

Question

I am trying to center a character beneath another element, where the top element is on the same line with other elements, all of which are centered within a container, and the bottom element has other elements to its right, such as this:

The combination of the radio button and the text are centered within the container, and the arrow is supposed to be centered beneath the radio button (but not whatever text is also there). The sample image is created with hard spaces which actually works surprisingly well and scales fine but seems like a stupid way to do it. Any thoughts on a 'correct' way to do it?

The table above comes from:

body {
  font-family: arial;
}
table,
td {
  border: 1px solid #aaaaaa;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
}

<table>
  <tr>
    <td align='center' width='33.3333333333333%'>
      <input type='radio' name='r1' value='1'>1</td>
    <td align='center' width='33.3333333333333%'>
      <input type='radio' name='r2' value='2'>2</td>
    <td align='center' width='33.3333333333333%'>
      <input type='radio' name='r3' value='3'>3</td>
  </tr>
  <tr>
    <td align='center' width='33.3333333333333%'>
      <div style='position:relative;top:-15px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
    <td align='center' width='33.3333333333333%'>&nbsp;</td>
    <td align='center' width='33.3333333333333%'>&nbsp;</td>
  </tr>
</table>

Answer 1

You can use the relative div and the left attribute to line up the arrow as you want it.

Note that, as mentioned in the comments, align is deprecated and was not serving a purpose from what I could see.

Also note that I've changed the html slightly and moved some repeated code to classes in the css to make the example a little more readable for myself, but the only additions were a one-column class (100% width) and the left attribute to the arrow container.

Tested on Chrome only.

body {
  font-family: arial;
}
table,
td {
  border: 1px solid #aaaaaa;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
}
.three-column {
    width: 33%;
}
.one-column {
    width: 100%;
}
.arrow-container {
    position:relative;
    top:-15px;
    left:14px;
}

Responsive: (check in new window)
<table class="one-column">
  <tr class="one-column">
    <td class="three-column">
      <input type='radio' name='r1' value='1'>1</td>
    <td class="three-column">
      <input type='radio' name='r2' value='2'>2</td>
    <td class="three-column">
      <input type='radio' name='r3' value='3'>3</td>
  </tr>
  <tr>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
  </tr>
</table>

Non-responsive: (no one-column class)
<table>
  <tr>
    <td class="three-column">
      <input type='radio' name='r1' value='1'>1</td>
    <td class="three-column">
      <input type='radio' name='r2' value='2'>2</td>
    <td class="three-column">
      <input type='radio' name='r3' value='3'>3</td>
  </tr>
  <tr>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
    <td class="three-column">
      <div class="arrow-container">
        <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span>
      </div>
    </td>
  </tr>
</table>