text-align:center Not working properly on absolute positioned spans

Question

I need to place 2 <span> inside a <div>, the first span must be placed on top, the second one on bottom, like North-South.

<div>
    <span class="north">N</span>
    <span class="south">S</span>
</div>

To do this, I thought about using position:absolute; on the 2 <span>.

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

Now, the spans should be positioned to the left (default), to center them, I used:

div
{
    text-align:center;
}

But I got this:

Check it out : http://jsfiddle.net/Zn4vB/

Why is this Happening?

Note: I cannot use margins, left, right, because the contents of those spans are different, I just need to align them properly in the center.

Thriftless

Answer 1

http://jsfiddle.net/Zn4vB/1/

The issue is that once absolutely positioned, it no longer follows the document flow. So the text is centered, but only inside the pink span. And since it's absolutely positioned, even if it were a div, the width would collapse.

The solution is to give the positioned spans a 100% width and then centering works.

span
{
    background-color:pink;
    left: 0;
    width: 100%;
}

If you don't want the pink to extend the full width, then you must nest an element (e.g. span) inside the positioned spans and give that element the background color, as seen here: http://jsfiddle.net/Zn4vB/6/

Vitus

Answer 2

please check if this one is the idea you want..

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
    border-style:solid;
}
span
{
    background-color:pink;
    width:100%;
    text-align:center;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

Surplus

Answer 3

You've got the positioning right. But <span> tags are inline elements, so you need to make them display as block-level elements with display: block; and then explicitly declare their width with width: 100%;.

They will inherit the text-align property from your style rules on the <div> so the text will be in the center.

I've updated your code here: http://jsfiddle.net/robknight/Zn4vB/5/

Chavarria

Once absolutely positioned, you don't need to declare it as block. Just a small point of clarification. – Vitus

Answer 4

you can use transform to solve this problem

 div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
    border-style:solid;
    text-align:center;
}
span
{
    background-color:pink;
}
.north
{
    position:absolute;
    top:0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.south
{
    position:absolute;
    bottom:0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Hedron