CODEWITHSUNDEEP
csshtml
Ben
Ben

Reputation: 16534

Div with 2 spans, center 1, right align other, but keep first one centered

I have a div with 2 spans in it. I want to keep the 1st span centered relative to the div and right align the 2nd (I'm using pull-right from bootstrap).

In the below JSBin, you'll see what I'm after. I want the 'Hello' span in Div1 to be in the same position as it is in Div2. In otherwords, I want to center the 1st span relative to the parent, and not be affected by any other spans in the div...

Here's my jsbin: http://jsbin.com/cixun/1/

Upvotes: 0

Views: 1095

Answers (2)

Faust
Faust

Reputation: 15404

The best way to do this is to absolutely position the right-span, instead of floating it. That will take it out of the flow, and the other span wont' "feel" it, and be more correctly in the center of the page

css

.row{position:relative;} /*required to make this a positioning container for abs.     
            positioned span */
.right{position:absolute;right:0px;}

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

One option would be to position the right span absolutely, relative to the div:

http://jsbin.com/wuged/1/edit

.row{
  position: relative;
}

.right{
  position: absolute;
  right: 0;
}

<div class="row black center" >
   <span class="first">Hello</span>

   <span class="right">more text on the right</span>
</div>

Upvotes: 2

Related Questions