How to center jquery Raty stars inside a bootstrap 3 table cell?

Question

I have been trying to get the stars from the Raty plugin to vertically align inside a bootstrap table, but I can't get it to work. I have tried:

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

My js is:

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

The stars don't seem to be aligned the same way "TEXT" is.

Here is a jsfiddle.

I would like to, but how can I include the Raty plugin there? — Dramal, Feb 08 '15 at 00:26
They have an option for external resources. Put the link to the plugin in there and it will be included. — j08691, Feb 08 '15 at 00:27
Seems to be vertically centered for me - [Fiddle](http://jsfiddle.net/youvhbey/1/) — Ramiz Wachtler, Feb 08 '15 at 00:36
I added some text [here](http://jsfiddle.net/jsehlpa/b1nrtL6z/). See how the stars stick out below the text? — Dramal, Feb 08 '15 at 00:48

score 0 · Answer 1 · answered Feb 08 '15 at 01:15

How about wrapping your text in a <span> and applying following CSS?

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

Here is a snippet

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

This looks like it aligns the text and the stars together, but I think they are still not centered. Compare it to the text in another `` with no spans [here](http://jsfiddle.net/jsehlpa/0v37fkuf/) — Dramal, Feb 08 '15 at 01:34

score 0 · Answer 2 · answered Oct 27 '15 at 11:56

I had the same problem with when I am using raty. In my case, the text is slighyly higher than the row of stars. Try adding css style to your text:-

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

I tested with your fiddle. It looks better with text-top.

Or you can try out other option for vertical-align. Refer to http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

How to center jquery Raty stars inside a bootstrap 3 table cell?

2 Answers2