CSS:与文本对齐

Question

在 CSS 方面，我完全是新手，我使用的是从另一个程序复制的代码，所以如果这是一个简单或奇怪的问题，请原谅。

在我的表中我有这段代码:

<td colspan="4" align="center">Rate this picture: 

<div id="$ratingsDiv" class="rating" align="center">&nbsp;</div></td>

在 css 文件中我发现了这个:

.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;
}

两个问题:
1 - 如何让它在我的 <td> 的中心对齐?
2 - 如何使它与我的“评价这张照片:”文本对齐？

编辑:http://jsfiddle.net/jcbq9osf/

Answer 1

试试这个 FIDDLE

<div class="wrapper">
    <div class="container">
        <div class="rate-text">Rate this Application</div>
        <div id="rate1" class="rating">&nbsp;</div>
    </div>
</div>

我已经更新了 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;
}

如果您发现对齐问题，请尝试更改 .container 的宽度。 让我知道它是否解决了您的问题