如何在 <td> 中水平居中表单内联元素

契克诺夫

想要的结果：

当前的：

如何将所有内容水平居中？尤其是第二部的内容<td>

迪帕切坦

只需添加margin:auto到行标签<div class="row" style="margin:auto">如下：https : //jsfiddle.net/01rewj56/1/

<div class="container">
    <div class="row">
        <div class="col-12">
            <table class="table table-borderless table-condensed mt-5">
              <thead>
                <tr>
                  <th style="text-align:center;">Reference Genome</th>
                  <th style="text-align:center;">Annovar version</th>
                  <th style="text-align:center;"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <td>
                        <select class="form-control" name="referenceGenomeSelect">
                            <option value="1">hg19</option>
                            <option value="2">hg38</option>
                        </select>   
                    </td>
                    <td>
                        <div class="form-inline">
                            <div class="row" style="margin:auto"> <!-- added margin auto --> 
                                <div class="col">
                                  <input type="text" id="annovarVersion" class="form-control" placeholder="Please select a file...">
                                </div>
                                <div class="col">
                                  <button class="btn btn-secondary" onclick="document.getElementById('annovarVersionInput').click()">Browse</button>
                                  <input type='file' id="annovarVersionInput" style="display:none" onchange='updateInputText(this.value, -1)'>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                    <button type="submit" class="btn btn-primary" >Save</button>
                    <button type="submit" class="btn btn-secondary" >Cancel</button>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。