CSS: Align with text - css

Question

I am a total Newbie when it comes to CSS, I am using code copied from another program so please excuse me if this is a simple or weird question.
In my table I have this code:
<td colspan="4" align="center">Rate this picture:
<div id="$ratingsDiv" class="rating" align="center"> </div></td>
and in the css file I have found this:
.rating {
cursor: pointer;
margin: 2em;
clear: both;
display: block;
}
.rating:after {
content: '.';
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
}
div.rating div.on a {
background-position: 0 -16px;
}
div.rating div.hover a,
div.rating div a:hover {
background-position: 0 -32px;
}
Two questions:
1 - How do I get it aligned in the center of my <td> ?
2 - How can I align it with my "Rate this picture:" text?
EDIT: http://jsfiddle.net/jcbq9osf/

Answer 1

try this FIDDLE
<div class="wrapper">
<div class="container">
<div class="rate-text">Rate this Application</div>
<div id="rate1" class="rating"> </div>
</div>
</div>
i have updated the CSS
body html{
margin:0 auto;
}
body{
background: red;
}
.wrapper{
background: #FFF;
width: 100%;
height: 100%;
margin: 0 auto;
color: #000;
text-align: center;
}
.container {
display: block;
background:blue;
width:30%;
margin:0 auto;
}
.rate-text{
margin:0 auto;
color:#000;
font-size:14px;
font-weight:bold;
vertical-align:top;
text-align:center;
display:inline;
}
if you found alignment issues try to change the width of .container.
let me know if its solved your problem