html - 在元素的某些部分水平对齐

Question

我试图将一个字符置于另一个元素下方，其中顶部元素与其他元素位于同一行，所有这些元素都在一个容器中居中，底部元素在其右侧有其他元素，例如这个:

单选按钮和文本的组合在容器内居中，箭头应该在单选按钮下方居中(但不是任何文本也在那里)。示例图像是用硬空间创建的，实际上效果出奇地好并且可以很好地缩放，但似乎是一种愚蠢的方法。关于“正确”方法的任何想法？

上表来自:

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

您可以根据需要使用相对的 div 和 left 属性来排列箭头。

请注意，正如评论中所提到的，align 已被弃用，并且在我看来没有达到目的。

另请注意，我稍微更改了 html 并将一些重复代码移动到 css 中的类，以使示例对我自己来说更具可读性，但唯一添加的是单列类(100% 宽度)和箭头容器的左属性。

仅在 Chrome 上测试。

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>