Centrato verticalmente, la casella di controllo Bootstrap cella di tabella

Voglio verticalmente centro di una casella di controllo all’interno di un Bootstrap cella di tabella, e questo è quello che ho ora:

<div>
    <table id="mytb" class="table table-hover table-condensed">
        <thead>
            <tr>
                <th style="width: 25%;">A</th>
                <th style="width: 40%">B</th>
                <th style="width: 35%">C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
            <tr>
                <td>Blah</td>
                <td>Blah More</td>
                <td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
            </tr>
        </tbody>
    </table>
</div>

/* CSS */
td.vcenter {
    vertical-align: middle;
}

Esempio qui: http://jsfiddle.net/dRgt2/2/. È chiaro che la casella di controllo è posizionato verso la metà inferiore della cella.

Notare che nel violino di sopra, ho già provato la soluzione a questa domanda: Centratura un pulsante verticalmente in una cella di tabella, utilizzando Twitter Bootstrap, ma non sembra funzionare nel mio caso.

Sto usando l’ultima Bootstrap 2.3.2, se questo fa la differenza.

InformationsquelleAutor skyork | 2013-07-24



3 Replies
  1. 7

    Rimuovere margin-top per la casella di controllo per allineare la casella di controllo centrale.

    input[type="radio"], input[type="checkbox"] {
        line-height: normal;
        margin: 0;
    }
    • rimuovere i margini non! grazie!
  2. 4

    Semplice, Basta aggiungere stile personalizzato casella di controllo

    input[type="checkbox"]{
      margin-top: 0;
      line-height: normal;
    }
  3. 0

    Questo Css Per Me Ha Funzionato !

    tbody 
    {
        line-height: 0;
    }
    
    .table td, .table th {
        vertical-align: middle !important;
    }
    
    td>.custom-control>.custom-control-input[type="checkbox"] 
    {
        position: relative !important;
    }

Lascia un commento