代码之家  ›  专栏  ›  技术社区  ›  DooDoo

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

  •  0
  • DooDoo  · 技术社区  · 6 年前

    下面是我的代码:

    #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 不要垂直地排成一行。我该怎么解决?

    3 回复  |  直到 6 年前
        1
  •  1
  •   Hien Nguyen    6 年前

    您可以更改p标记顶部的边距

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

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

    更新时间:

    可以删除float left并使用display:inline块

    #myTable {
      display:inline-block;
      vertical-align: middle;
    }
    
    p {
      display:inline-block;
      vertical-align: middle;
    
      font-size: 24px;
    }
    

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

        2
  •  1
  •   vvvvv lexa-b    6 年前

    如果可以去掉浮点数(这可能非常有益),请将这两个元素都视为 内联块/内联表 这样地:

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

    Screenshot from sandbox

    #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>
        3
  •  0
  •   Ali    6 年前

    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