html - 使用 bootstrap 居中 <td>

Question

我正在尝试将一些输入置于表格的中心，并使用 Bootstrap (在 angularjs 上)为此 td 设置一个大小，但我无法让它工作!

我现在拥有的:

<div class="container">
    <form class="form" data-ng-submit="salvarPartida()">
        <table class="table table-bordered" align="center">
            <tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
                <td style="height: 30px; text-align: right; font-size: 10pt;">{{partida.time1.nome}}
                    <img data-ng-src="/images/bandeiras/{{partida.time1.imgNumber}}.png" style="vertical-align: middle;">
                </td>
                <td  class="col-sm-6">
                    <div class="col-xs-3" >
                        <input type="text" class="form-control">
                    </div>
                    <div class="col-xs-3">
                        <input type="text" class="form-control">
                    </div>
                </td>
                <br>
                <td  style="height: 30px; text-align: left; font-size: 10pt;"><img src="/images/bandeiras/{{partida.time2.imgNumber}}.png" title="{{partida.time2.nome}}" 
                    style="vertical-align: middle;"> {{partida.time2.nome}}</td></tr>
                </table>
                <button class="btn btn-primary btn-block" type="submit">Salvar</button>
                <br>
                <br>
            </form>
        </div>

看起来像:

但我的期望是:

不要管颜色样式，我只想正确对齐所有字段!

我试过在 td 类中的 class="text-align"上使用 align="center"，还尝试使用之前的 text-center 类创建一个嵌套到其中，但没有成功!

我的 jsfiddle:fiddle

非常感谢。

Answer 1

居中<td>使用 Bootstrap 很简单:

• 横向:

<td class="text-center">

• 垂直:

<td class="align-middle">