Question

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

Answer 1

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

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

这是一个代码段

＆＃13;

/*!
 * 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();
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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看起来效果更好。

或者您可以尝试使用vertical-align的其他选项。请参阅http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

如何在一个bootstrap 3表格单元中居中jquery Raty星？

2 个答案: