如何在表格行中使用'font-size：〜small'中心制作文本答案

【问题标题】：How to make text with 'font-size: ~small' center in the table row如何在表格行中使用'font-size：〜small'中心制作文本
【发布时间】：2020-04-17 17:09:25
【问题描述】：

查看此代码笔：https://codepen.io/atom999/pen/eYpZXqK

<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
<table>
  <td>
  <td> Choose >>> </td>
    <td>
        <input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
</table>

我正在开发的应用程序有“font-size: 8pt;”.. 我无法真正改变它。但我想做的就是将行中较小的文本居中，并带有一个单选按钮。我已经尝试了所有与“字体”和“大小”相关的样式，但似乎没有什么能让我在表格行中将较小的文本居中。

我该怎么做？

【问题讨论】：

简单地使 td 成为一个弹性容器，使用 display:flex;然后设置，对齐项目：中心；你的任务就完成了。如果有帮助，请检查我的回答和评分:) 谢谢

标签： html css

【解决方案1】：

使用基本的 flex-property，align-items:center;文本与您的单选按钮对齐：

.tableRow{
  display: flex;
  align-items:center;
}

<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
  

<table>
  <td>
  <td> Choose >>> </td>
	<td class="tableRow">
		<input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
  
</table>

【讨论】：

【解决方案2】：

只需将其添加到您的 .css 文件中：

input[name="vid"] {
span {
display:flex;
align-items:center;
}  
}

希望有帮助

【讨论】：

【解决方案3】：

@Atom999 我将您的<span> 元素更改为一个弹性容器，并使用您的单选按钮将元素内联到居中。希望这会有所帮助！

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 8pt;
  display: inline;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <td>
      <td> Choose >>> </td>
      <td>
        <input name="vid" type="radio" id="foo" checked>
        <span>
      this text is too low, I want it centered with the radio button
        </span>  
      </td>
    </table>
  </body>
</html>

【讨论】：

【解决方案4】：

您可以使用 flex 布局进行对齐。

<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
<table>
  <td>
  <td> Choose >>> </td>
    <td style="display: flex;align-items: center;justify-content: center;">
        <input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
</table>

【讨论】：