中心文本到页面而不是单元格

I have a sticky footer bar thanks to the folks at cssstickyfooter which holds a disclaimer. I wanted to put a facebook like button on the right hand side... so I created a table with the below code for the footer.

我有一个粘性的页脚栏，感谢cssstickyfooter的人们持有免责声明。我想在右侧放置一个像facebook一样的按钮...所以我创建了一个带有以下代码的表格。

#footer {
    position: relative;
    margin-top: -60px;
    height: 60px;
    clear:both;
    background-color: #000;
    text-align: center;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

and the html as

和HTML一样

<div id="footer">
<table width="100%">
<tr>
    <td width="85%">
        <p>© 2011 somecompany<br />
        Image © 2011 by somebig company</p>
    </td>
    <td width="15%">
        <p>like goes here</p>
    </td>
</tr>
</table>
</div>

This (obviously) aligns the the text, but it aligns it to the cell that it is in. Is there anyway to align the disclaimer text to the center of the whole page and keep the like button to the right?

这（显然）对齐文本，但它将它与它所在的单元格对齐。无论如何，将免责声明文本与整个页面的中心对齐并保持相似的按钮在右边？

I have thought about just putting the like button in its own table and have that floating there... but I'm not sure.

我已经考虑过将这样的按钮放在自己的桌子上然后漂浮在那里......但我不确定。

Theres a jsfiddle example over at http://jsfiddle.net/Gnznn/

这是http://jsfiddle.net/Gnznn/上的一个小例子

Thanks!

谢谢！

Marked as homework so I can get an explaination

标记为作业，所以我可以得到解释

1 个解决方案

#1

I have a feeling there is a cleaner* way to do this, but this at least works and does not use tables for layout. Note, I put the styles in an attribute so you could see what I was doing easier, but you should put that in your declarations in relevant classes.

我有一种感觉，有一种更清洁*的方法来做到这一点，但这至少有效，并没有使用表格进行布局。注意，我将样式放在属性中，这样您就可以更容易地看到我做的事情，但是您应该将它放在相关类的声明中。

<div id="footer">
    <div style="width: 15%; height: 1px; float: left;"></div>
    <div style="width: 70%; float: left;">
        <p>© 2011 somecompany<br />Image © 2011 by somebig company</p>
    </div>
    <div style="width: 15%; float: right;">
        <p>like goes here</p>
    </div>
</div>

http://jsfiddle.net/Gnznn/3/

http://jsfiddle.net/Gnznn/3/

* In other words, using position: relative or position: absolute with right: 0 and z-index: 5000 (or something).

*换句话说，使用position：relative或position：absolute with right：0和z-index：5000（或其他）。