如何在Bootstrap3表单元格中居中放置jquery Raty星？

我一直试图让插件中的星星在引导表中垂直对齐，但我无法让它工作。我试过：

<table class="table table-striped">
  <tbody>
    <tr>
     <td id="stars" style=" text-align: center; vertical-align: middle; border:1px solid black;" id="mycell">TEXT</td>
  </tr>
  </tbody>
</table>

星星看起来不像“文本”那样排列

---

这是一个。

如何将文本包装在

中并应用以下CSS

span{
    vertical-align:middle;
}
img{
    vertical-align:middle;
}

这里是一个片段

/*！
*jQuery Raty-星级插件
*
*麻省理工学院执照
*
*@作者：华盛顿·博特略
*@doc:http://wbotelhos.com/raty
*@version:2.7.0
*
*/
;
（函数（$）{
"严格使用",；
$.fn.raty.defaults={
取消：错，
cancelClass:“raty cancel”，
cancelHint:'取消此评级！'，
cancelOff:'cancel off.png'，
cancelOn:'cancel on.png'，
取消地点：'左'，
单击：未定义，
一半：错，
是的，
提示：[“差”、“差”、“一般”、“好”、“华丽”]，
iconRange:未定义，
mouseout：未定义，
鼠标悬停：未定义，
noRatedMsg:“尚未评级！”，
编号：5，
最大值：20，
路径：未定义，
精度：错误，
只读：false，
圆形：{
下跌：0.25，
满分：0.6，
上升：0.76
},
分数：未定义，
scoreName:'score'，
单身：错，
空间：是的，
半明星：'http://www.wbotelhos.com/raty/lib/images/star-half.png',
starOff:'http://www.wbotelhos.com/raty/lib/images/star-off.png',
斯达隆：'http://www.wbotelhos.com/raty/lib/images/star-on.png',
星型：'img'，
目标：未定义，
targetFormat:“{score}”，
targetKeep:false，
targetScore:未定义，
targetText:“”，
targetType:“提示”
};
})（jQuery）；
$（函数（）{
$（'#stars'）.raty（）；
})

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
跨度{
垂直对齐：中间对齐；
}
img{
垂直对齐：中间对齐；
}

正文

我在使用raty时也遇到了同样的问题。在我的例子中，文本略高于一排星星。尝试将css样式添加到文本：-

<td id="stars" style=" text-align: center; vertical-align: middle; border:1px solid black;" id="mycell"><span style:vertical-align:text-top;>TEXT</span></td>

文本

我用你的小提琴测试过。它看起来更好的文字顶部

---

或者，您也可以尝试垂直对齐的其他选项。请参阅

您能创建一个JSFIDLE吗？我很想，但我如何在其中包含Raty插件？它们有一个外部资源选项。把插件的链接放在那里，它就会被包括进去。对我来说，似乎是垂直居中的-我添加了一些文本。看到文字下方的星星是如何突出的了吗？这看起来像是将文字和星星对齐在一起，但我认为它们仍然没有居中。将其与另一个无跨距的

中的文本进行比较

<td id="stars" style=" text-align: center; vertical-align: middle; border:1px solid black;" id="mycell"><span style:vertical-align:text-top;>TEXT</span></td>