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的宽度。让我知道它是否解决了你的问题

CSS：与文本对齐

1 个答案: