如何将文本居中于左侧有一些文本的同一行

Question

我有一个带有2个文本部分的页脚div。 我希望第一个位于左侧，第二个位于中间位置 - 它的位置不会受到屏幕页面的干扰。

（图片：将红色部分移动到粉红色部分。）

我做了一个jsfiddle示例，所以它可能会帮助你在这篇文章的最后 -

HTML：

<div class="footer">
    <span style="float:left;">Copyright © 2014 blaclaclaclacl All rights reserved.</span>
    <span style="margin: 0 auto;">  
        <a href="javascript:void(0)" onclick="$('#extpopup').show('slow');return false;" class="copy">Terms &amp; Conditions</a>
    </span>
    <div style="clear:both"></div>
    </div>

CSS：

.footer{
    border:1px solid black;
} 

http://jsfiddle.net/dfn2wepv/

Answer 1

将班级center添加到第二个范围，并将css调整为以下值。

<div class="footer">
    <span style="float:left;">Copyright © 2014 blaclaclaclacl All rights reserved.</span>
    <span class="center">
        <a href="javascript:void(0)" onclick="$('#extpopup').show('slow');return false;" class="copy">Terms &amp; Conditions</a>
    </span>
    <div style="clear:both"></div>
</div>


.footer{
    border:1px solid black;
    position: relative;
} 

.center{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    text-align: center;
}

请参阅http://jsfiddle.net/dfn2wepv/3/

或者如果你真的想内联它。

<div class="footer">
    <span style="float:left;">Copyright © 2014 blaclaclaclacl All rights reserved.</span>
    <span style="display:block; position:absolute; top:0; left:0; width:100%; text-align: center;">
        <a href="javascript:void(0)" onclick="$('#extpopup').show('slow');return false;" class="copy">Terms &amp; Conditions</a>
    </span>
    <div style="clear:both"></div>
</div>

Answer 2

将其拆分为某种列：http://jsfiddle.net/dfn2wepv/1/

使用类而不是nth-of-type也值得一试，这只是概念验证。

.footer{
    border:1px solid black;
} 

.footer span {
    display: inline-block;
}

.footer span:nth-of-type(1) {
    width: 30%;
}

.footer span:nth-of-type(2) {
    text-align: center;
    width: 40%;
}

Answer 3

您想提供宽度

<span style="float:left;width: 50%;">
   Copyright © 2014 blaclaclaclacl All rights reserved
</span>
<span style="margin: 1px auto 0px;width: 50%;text-align:center;">

Answer 4

.copy{
float:right
}

将此类添加到CSS中。