How can I horizontally align 2 spans in the same line? - css

Question

I have 2 spans in the same line with several elements in each one.
How can I add css styles to my 2 spans and make one be centered, the other one in the same line shouldn't move the previous one (centered), but it should bind to its right corner.
HTML
<span><!-- should be centered-->
<a id="3"></a><span id="2"> ..... </span>
<a id="1">...</a>
</span>
<span><!-- left corner of this span should meet the right corner of the previous span -->
<label>something</label><input type="text" id="5">
<input type="button" />
</span>
<span class="mrRight"><!-- float right here --> ...... </span>

Answer 1

You need to set the first spans margin-left to 48%. Or if you want to be precise, margin-left: calc(50% - x), where x is half of the width of the first span.
fiddle
Note: the gradient is there just to show you where the center is :)
.center { margin-left: calc(50% - 26px) }

Answer 2

To achieve this firstly you need to add a wrapper around the spans like so
HTML
<div class="span_wrapper">
<span>
<a id="3"></a><span id="2"> center </span>
<a id="1">center</a>
</span>
<span>
<label>something</label>
<input type="text" id="5"> <input type="button" />
</span>
<span class="mrRight"> right </span>
</div>
Now the appropriate CSS should be
.span_wrapper {
text-align: center;
}
.span_wrapper .mrRight{
float: right;
}
.span_wrapper {
text-align: center;
}
.span_wrapper .mrRight{
float: right;
}
<div class="span_wrapper">
<span>
<a id="3"></a><span id="2"> center </span>
<a id="1">center</a>
</span>
<span>
<label>something</label>
<input type="text" id="5"> <input type="button" />
</span>
<span class="mrRight"> right </span>
</div>