如何將文本居中放在左側有一些文本的同一行

我有一個包含2個文本部分的頁腳div。我希望第一個在左側，第二個在中間 - 它的位置不會受到屏幕頁面的干擾。（圖片：移動紅色部分的粉紅色的）如何將文本居中放在左側有一些文本的同一行

enter image description here

我做了一個的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/

來源

2014-09-04 Rick Sanchez

http://jsfiddle.net/dfn2wepv/2/ ???? – 2014-09-04 11:20:30

只需在另一個跨度上添加「style =」float：right;「」。 – brianlasta 2014-09-04 11:36:55

你要提供寬度

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

來源

2014-09-04 11:21:25

拆分成某種列：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%; 
}

來源

2014-09-04 11:21:03 Joe

類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>

來源

2014-09-04 11:23:32 TeeDeJee

.copy{ 
float:right 
}

這個類添加到您的CSS。

來源

2014-09-04 11:32:34

如何將文本居中放在左側有一些文本的同一行

回答

相關問題