1

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

4

2 回答 2

0

将文本包装在 a 中<span>并应用以下 CSS 怎么样？

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

这是一个片段

/*!
 * 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>

于 2015-02-08T01:15:46.893 回答
0

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

于 2015-10-27T11:56:45.373 回答