使用引导程序居中 <td>答案

【问题标题】：Center <td> using bootstrap使用引导程序居中 <td>
【发布时间】：2014-07-20 23:26:05
【问题描述】：

我正在尝试将一些输入集中在一个表格中，并使用引导程序（在 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

非常感谢。

【问题讨论】：

在td中使用align="center"属性...
简单，因为将文本框包装在 div 中，给包含文本框的 td align="center"
我试过了，没有运气。另外，间距问题也没有解决。
试一试你的代码
使用 bootrap 不需要使用表格来布局 bootsrap 本身为此目的提供 css 类

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用引导程序将<td> 居中很简单：

水平方向：

<td class="text-center">

垂直：

<td class="align-middle">

【讨论】：

【解决方案2】：

你可以试试这个：

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/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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;
}

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

【讨论】：