如何在 bootstrap 3 表格单元格中居中 jquery Raty 星星？答案

【问题标题】：How to center jquery Raty stars inside a bootstrap 3 table cell?如何在 bootstrap 3 表格单元格中居中 jquery Raty 星星？
【发布时间】：2015-02-08 00:15:45
【问题描述】：

我一直试图让 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>

我的js是：

$(function() {
    $('#stars').raty();
})

星星的排列方式似乎与“TEXT”不同。

这是jsfiddle。

【问题讨论】：

你能创建一个jsFiddle吗？
我想加入，但如何在其中包含 Raty 插件？
他们可以选择外部资源。将插件的链接放在那里，它将被包含在内。
对我来说似乎是垂直居中的 - Fiddle
我添加了一些文字here。看看文字下方的星星是如何突出的？

标签： jquery twitter-bootstrap raty

【解决方案1】：

如何将您的文本包装在 <span> 中并应用以下 CSS？

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

这是一个sn-p

/*!
 * jQuery Raty - A Star Rating Plugin
 *
 * The MIT License
 *
 * @author  : Washington Botelho
 * @doc     : http://wbotelhos.com/raty
 * @version : 2.7.0
 *
 */

;
(function($) {
  'use strict';


  $.fn.raty.defaults = {
    cancel: false,
    cancelClass: 'raty-cancel',
    cancelHint: 'Cancel this rating!',
    cancelOff: 'cancel-off.png',
    cancelOn: 'cancel-on.png',
    cancelPlace: 'left',
    click: undefined,
    half: false,
    halfShow: true,
    hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
    iconRange: undefined,
    mouseout: undefined,
    mouseover: undefined,
    noRatedMsg: 'Not rated yet!',
    number: 5,
    numberMax: 20,
    path: undefined,
    precision: false,
    readOnly: false,
    round: {
      down: 0.25,
      full: 0.6,
      up: 0.76
    },
    score: undefined,
    scoreName: 'score',
    single: false,
    space: true,
    starHalf: 'http://www.wbotelhos.com/raty/lib/images/star-half.png',
    starOff: 'http://www.wbotelhos.com/raty/lib/images/star-off.png',
    starOn: 'http://www.wbotelhos.com/raty/lib/images/star-on.png',
    starType: 'img',
    target: undefined,
    targetFormat: '{score}',
    targetKeep: false,
    targetScore: undefined,
    targetText: '',
    targetType: 'hint'
  };

})(jQuery);
$(function() {
  $('#stars').raty();
})

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 span {
  vertical-align: middle;
}
img {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.wbotelhos.com/raty/lib/jquery.raty.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<table class="table table-striped">
  <tbody>
    <tr>
      <td id="stars" style=" text-align: center; vertical-align: middle; border:1px solid black;" id="mycell"><span>TEXT</span>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

这看起来像是将文本和星星对齐在一起，但我认为它们仍然没有居中。将其与另一个 <td> 中的文本进行比较，没有跨度 here

【解决方案2】：

我在使用 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>

我用你的小提琴测试过。使用 text-top 看起来更好。

或者您可以尝试垂直对齐的其他选项。参考http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

【讨论】：