twitter-bootstrap 使用引导程序居中 <td>

Center <td> using bootstrap

提问by Leonardo

I'm trying to center some inputs inside a table and set a size to this td using bootstrap (on angularjs) but I can't make it work !

我正在尝试将一些输入放在表中居中，并使用引导程序（在 angularjs 上）为此 td 设置大小，但我无法使其工作！

What I have now:

我现在所拥有的：

<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>

Which looks like:

看起来像：

But my expectations are :

但我的期望是：

Nevermind the color styles, I'd like just to proper align all fields !

别管颜色样式，我只想正确对齐所有字段！

I've tried using align="center" on the , class="text-align" inside the td class, also tried creating a nested into this using the previous text-center class but no luck !

我试过在 td 类中的 , class="text-align" 上使用 align="center" ，也尝试使用之前的 text-center 类创建一个嵌套的对象，但没有运气！

My jsfiddle: fiddle

我的 jsfiddle：小提琴

Thanks so much.

非常感谢。

采纳答案by midstack

Can you try this:

你能试试这个吗：

HTML

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

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/

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

回答by Oleh Vasylyev

Centering <td>using bootstrap is simple:

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

• horizontally:

• 水平：

<td class="text-center">

<td class="text-center">

• vertically:

• 垂直：

<td class="align-middle">

<td class="align-middle">

回答by Kisspa

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

回答by Hristo Georgiev

Try adding up custom CSS:

尝试添加自定义 CSS：

HTML

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

CSS

.max-center {

  text-align:center;
}

You can also try adding additional padding to the cells on the sides, but I'm not sure how much because I don't have the images. Just be careful, it can mess up the layout.

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