使段落和表格内联并放置在容器的中间

Question

以下是我的代码：

#myTable {
  float: left;
  vertical-align: middle;
}

p {
  float: left;
  vertical-align: middle;
}

<div id="container">
  <p>
    Title
  </p>
  <table id="myTable">
    <tr>
      <td>
        <input name="input1" id="input1" type="radio" value="1">
        <label for="input1">No</label>
      </td>
      <td>
        <input name="input2" id="input2" type="radio" value="2">
        <label for="input2">Yes</label>
      </td>
    </tr>
  </table>
</div>

问题是p和table不能垂直排列。我该如何解决？

Answer 1

您可以更改p标签的页边空白

p {
  float: left;
  vertical-align: middle;
  margin-top:5px;
}

https://jsfiddle.net/viethien/gjwms4n1/4/

已更新：

您可以删除左浮动并使用display：inline-block

#myTable {
  display:inline-block;
  vertical-align: middle;
}

p {
  display:inline-block;
  vertical-align: middle;

  font-size: 24px;
}

https://jsfiddle.net/viethien/smytrqe7/3/

Answer 2

如果您可以摆脱浮点数（这可能真的很有用），则将两个元素都视为 inline-blocks / inline-tables ，如下所示：

#myTable {
  display: inline-table;
  vertical-align: middle;
}

p {
  display: inline-block;
  vertical-align: middle;
}

#myTable {
      display: inline-table;
      vertical-align: middle;
    }
    
    p {
      display: inline-block;
      vertical-align: middle;
    }

<div id="container">
  <p>
    Title
  </p>
  <table id="myTable">
    <tr>
      <td>
        <input name="input1" id="input1" type="radio" value="1">
        <label for="input1">No</label>
      </td>
      <td>
        <input name="input2" id="input2" type="radio" value="2">
        <label for="input2">Yes</label>
      </td>
    </tr>
  </table>
</div>

Answer 3

在CSS中更新：

p {
  float: left;
  vertical-align: middle;
  margin:0px;
  line-height: 25px;
}

Fiddle

还请检查以下内容：

#container {
  display: table
}
#myTable {
  display: table-cell;
  vertical-align: middle;
}
p {
  display: table-cell;
  vertical-align: middle;
}

Fiddle