Center <td> à l'aide de bootstrap

Je suis en train de centre de certains intrants à l'intérieur d'une table et définir une taille pour ce td, à l'aide de bootstrap (sur angularjs), mais je ne peux pas le faire fonctionner !

Ce que j'ai maintenant:

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

Qui ressemble à: Center <td> à l'aide de bootstrap

Mais mes attentes sont les suivantes : Center <td> à l'aide de bootstrap

Passons sur les styles de couleur, j'aimerais juste le bon alignement de tous les champs !

J'ai essayé d'utiliser align="center" sur la , classe="text-align" à l'intérieur de la td class, également essayé de créer un imbriqués dans ce texte précédent-centre de classe mais pas de chance !

Mon jsfiddle: violon

Merci beaucoup.

  • utilisation align="center" attribut dans td...
  • simple envelopper la zone de texte dans un div donner le td contenant les zones de texte align="center"
  • J'ai essayé, pas de chance. Aussi, l'espacement problème n'est pas résolu.
  • donner un violon avec votre code
  • avec bootrap il n'est pas nécessaire d'utiliser le tableau pour la mise en bootsrap lui-même fournir des classes css pour que les fins
  • ce que recommande alors user3127499 ? Merci !

InformationsquelleAutor Leonardo | 2014-05-31
  1. 2

    Pouvez-vous essayer ceci:

    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/

    InformationsquelleAutor midstack
  2. 2

    Centrage <td> à l'aide de bootstrap est simple:

    • horizontalement:

    <td class="text-center">

    • verticalement:

    <td class="align-middle">

    InformationsquelleAutor Oleh Vasylyev
  3. 0
    //use td is padding
 td{
     vertical-align:middle;
     padding:10px 20px;
     width:1000px;
 }
    • ne fonctionne pas aussi !
    • oui, l'affichage vous code
    • fait mon ami !
    InformationsquelleAutor Kisspa
  4. 0

    Essayez d'ajouter jusqu'CSS personnalisé:

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

    Vous pouvez aussi essayer d'ajouter un rembourrage supplémentaire pour les cellules sur les côtés, mais je ne suis pas sûr de savoir comment beaucoup parce que je n'ai pas les images. Juste être prudent, il peut gâcher la mise en page.

    InformationsquelleAutor Hristo Georgiev