元素部分的水平对齐

Question

我试图将一个字符置于另一个元素下面，其中顶部元素与其他元素在同一条线上，所有元素都在容器中居中，而底部元素在其右侧有其他元素，例如：

单选按钮和文本的组合在容器中居中，箭头应该在单选按钮下方居中（但不是任何文本也在那里）。样本图像是用硬空间创建的，实际上效果非常好并且可以很好地缩放，但看起来像是一种愚蠢的方式。关于“正确”的任何想法。这样做的方法？

上表来自：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

请注意，正如评论中所提到的那样，不推荐使用对齐，并且不能从我能看到的目的中获得目的。

另请注意，我稍微更改了html，并将一些重复的代码移动到css中的类，以使示例对我自己更具可读性，但唯一的补充是单列类（100％宽度）和左侧属性为箭头容器。

仅在Chrome上测试。

git ls-files

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;
}