如何将文本居中放在左侧有一些文本的同一行
问题描述:
我有一个包含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 & Conditions</a>
</span>
<div style="clear:both"></div>
</div>
CSS:
.footer{
border:1px solid black;
}
答
你要提供宽度
<span style="float:left;width: 50%;">
Copyright © 2014 blaclaclaclacl All rights reserved
</span>
<span style="margin: 1px auto 0px;width: 50%;text-align:center;">
答
拆分成某种列: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%;
}
答
类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 & 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 & Conditions</a>
</span>
<div style="clear:both"></div>
</div>
答
.copy{
float:right
}
这个类添加到您的CSS。
http://jsfiddle.net/dfn2wepv/2/ ???? – 2014-09-04 11:20:30
只需在另一个跨度上添加“style =”float:right;“”。 – brianlasta 2014-09-04 11:36:55