Center <td> using bootstrap

Question

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 !

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 !

My jsfiddle: fiddle

Thanks so much.

Answer 1

Centering <td> using bootstrap is simple:

• horizontally:

<td class="text-center">

• vertically:

<td class="align-middle">

Answer 2

Can you try this:

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/