CODEWITHSUNDEEP
htmlcss
Imnotapotato
Imnotapotato

Reputation: 5808

How to center a text one the same line where there is some text on the left

I have a footer div with 2 texts parts. I want the first one to be on the left side, and the second to be in the middle - and it's position wont be disturbed by the screens page.

(image: move the red part to the pink one.)

enter image description here

I made a jsfiddle example so it will maybe help you in the end of this post -

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/

Upvotes: 0

Views: 57

Answers (4)

Mohaideen Ismail
Mohaideen Ismail

Reputation: 314

.copy{
float:right
}

Add this class to your CSS.

Upvotes: 0

TeeDeJee
TeeDeJee

Reputation: 3741

add the class center to your second span and adjust the css to the following.

<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;
}

see http://jsfiddle.net/dfn2wepv/3/

Or if you really want to do it inline.

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

Upvotes: 2

Punitha Subramani
Punitha Subramani

Reputation: 1477

You want to provide width

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

Upvotes: 1

Joe
Joe

Reputation: 15802

Split it into columns of some kind: http://jsfiddle.net/dfn2wepv/1/

Using classes rather than nth-of-type is worth doing as well, this is just proof-of-concept.

.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%;
}

Upvotes: 1

Related Questions