Center <td> using bootstrap - html

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/

Answer 3

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

Answer 4

Try adding up custom 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;
}
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.