html - Center <td> using bootstrap -


i'm trying center inputs inside table , set size td using bootstrap (on angularjs) can't make work !

what 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: this

but expectations : expectations

nevermind color styles, i'd proper align fields !

i've tried using align="center" on , class="text-align" inside td class, tried creating nested using previous text-center class no luck !

my jsfiddle: fiddle

thanks much.

can 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 , (max-width:765px) {     .m-row > div {         text-align:center;     } } 

http://jsfiddle.net/vea5g/2/


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -