Textausrichtung in Tabelle

Question

Ich versuche, meinen Text in meiner Tabelle auszurichten, tut es irgendeine Bootstrap-Klasse?

, wie Sie den Text sehen können, es ist ein bisschen nach oben mit dem Symbol zu vergleichen und die <td>

jede schnelle Lösung für dieses?

jsfiddle: https://jsfiddle.net/wuuf5g87/9/

css:

table i { 
    color: #3181cc; 
    background: #ffffff; 
    border-radius: 20px; 
    padding: 6px 0; 
    width: 30px; 
    margin-right: 5px; 
    border: 2px solid #e5eaee; 
    text-align: center; 
} 

html:

<table class="table table-scroll table-striped" aurelia-table=""> 
    <thead> 
    <tr> 
     <th class="col-md-4">Time</th> 
     <th class="col-md-4">Time of Call</th> 
     <th class="col-md-4">Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
     <td> 
     Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
     </td> 
     <td> 
     wwwwwww 
     </td> 
    </tr> 
    <tr> 
     <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
     <td> 
     Call 7:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
     </td> 
     <td> 
     wwwwwww 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

hinzufügen unten CSS in Ihrem CSS:

.table td i { 
    margin-top: 2px; 
} 

es Ihr Problem lösen.

Update:

Hier ist die aktualisierte CSS-Klasse, die Klasse, die Sie verwenden:

table i { 
    color: #3181cc; 
    background: #ffffff; 
    border-radius: 20px; 
    padding: 6px 0; 
    width: 30px; 
    margin-right: 5px; 
    border: 2px solid #e5eaee; 
    text-align: center; 
    margin-top: -5px; //add this line in your exiting class 
} 

Fiddle:http://jsfiddle.net/wuuf5g87/14/

Answer 2

Sie brauchen nur ein wenig Spielraum:

table i { 
 
    margin-top: 3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<table class="table table-scroll table-striped" aurelia-table=""> 
 
    <thead> 
 
    <tr> 
 
     <th class="col-md-4">Time</th> 
 
     <th class="col-md-4">Time of Call</th> 
 
     <th class="col-md-4">Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>12:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
     <td> 
 
     Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
     </td> 
 
     <td> 
 
     wwwwwww 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
     <td> 
 
     Call 7:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
     </td> 
 
     <td> 
 
     wwwwwww 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>