Question

当我尝试将字符c创建为子对齐时，表格行中跟随的bar文本也会进行子对齐（非常不直观）。

<table> 
  <tr>
    <td>test</td>
    <td>foo<sel style="vertical-align: sub">c</sel></td>
    <td>bar</td>
  </tr>
</table>

有人可以指出，我做错了什么或如何解决这个问题。

这是小提琴：https://jsfiddle.net/aaL06scu/

Answer 1

使用此：

＆＃13;

td {
  vertical-align:baseline;
}
sel {
  vertical-align:sub;
}

＆＃13;

<table>	
  <tr>
    <td>test</td>
    <td>foo<sel>c</sel></td>
    <td>bar</td>
  </tr>
</table>

＆＃13;

来自官方CSS规范：

将框的基线降低到父框的下标的正确位置 https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

解释（为什么会这样）：
<tbody>正在使用vertical-align:middle;。这些规则以<tbody>的整个内容为中心。 <td>元素继承此规则。你可以看到整个内容（带有下标）位于中间。下标的整个内容比没有下标略高，中间不在字母的中间，因为下标扩展了整个文本的高度。如果要将字母设置为一行，则必须vertical-align到基线。基线是放置字母的位置或线。如果对行的所有内容执行此操作，则文本（不在下标中）应位于一行（请参阅示例）。

Answer 2

使用<sub>代码

＆＃13;

<table>
  <tr>
    <td>test</td>
    <td>foo<sub>c</sub></td>
    <td>bar</td>
  </tr>
</table>

＆＃13;

<强>输出： test foo _c bar

有关<sub>检查http://www.w3schools.com/tags/tag_sub.asp

的更多参考信息

sub仅对齐一个元素下面的文本

2 个答案: