中心使用bootstrap

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”，也尝试使用以前的文本中心类创建嵌套到这个但没有运气！

我的jsfiddle：fiddle

非常感谢。

Answer 1

你可以试试这个：

<强> HTML

<div class="container m-con">
<form class="form" data-ng-submit="salvarPartida()">
    <table class="table table-bordered">
        <tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
            <td class="col-sm-4 col-xs-4">
                <div class="row m-row">
                    <div class="col-xs-12 col-sm-4 col-lg-4 col-sm-push-8 text-right">
                        <img src="http://placehold.it/50x50" alt="" height="50"  width="50" />
                    </div>
                    <div class="col-xs-12 col-sm-8 col-lg-8 col-sm-pull-4 m-text text-right">
                        Brazil                           
                    </div>

                </div>
            </td>
            <td class="col-sm-4 col-xs-4">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-lg-6">
                        <input type="text" class="form-control" />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-lg-6">
                        <input type="text" class="form-control" />
                    </div>
                </div>                
            </td> 
            <td class="col-sm-4 col-xs-4">
                <div class="row m-row">
                    <div class="col-xs-12 col-sm-4 col-lg-4 text-right">
                        <img src="http://placehold.it/50x50" alt="" height="50"  width="50" />
                    </div> 
                    <div class="col-xs-12 col-sm-8 col-lg-8 m-text text-left">
                        Brazil                           
                    </div>                        
                </div>
            </td>
        </tr>
    </table>
    <button class="btn btn-primary btn-block" type="submit">Salvar</button>        
</form>
</div>

<强> CSS

.m-con {
    margin: 20px;
}

.m-text {
    font-size: 16px;
    padding-top:15px;
    font-weight:bold;
}

.m-con td {
    vertical-align:middle !important;
}

@media screen and (max-width:765px) {
    .m-row > div {
        text-align:center;
    }
}

http://jsfiddle.net/vea5G/2/

Answer 2

使用bootstrap对<td>进行居中很简单：

• 水平：

<td class="text-center">

• 垂直：

<td class="align-middle">

Answer 3

//use td is padding
 td{
     vertical-align:middle;
     padding:10px 20px;
     width:1000px;
 }

Answer 4

尝试添加自定义CSS：

<强> HTML

               <div class="col-xs-3 max-center" >
                    <input type="text" class="form-control">
                </div>
                <div class="col-xs-3 max-center">
                    <input type="text" class="form-control">
                </div>

<强> CSS

.max-center {

  text-align:center;
}

您还可以尝试在侧面的单元格中添加额外的填充，但我不确定多少，因为我没有图像。要小心，它会弄乱布局。