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

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>

you mean span1 should be center aligned & span2 should be right aligned on the same line horizontally ? — Nikhil Nanjappa, Dec 08 '16 at 11:13
do you have a wrapper to these spans ? Better provide the HTML as well to help — Nikhil Nanjappa, Dec 08 '16 at 11:17
Try with CSS flexbox: http://stackoverflow.com/q/38948102/3597276 — Michael Benjamin, Dec 08 '16 at 13:14

VilleKoo · Accepted Answer · 2016-12-08T12:45:44.010

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

edited Dec 08 '16 at 12:45

answered Dec 08 '16 at 12:39

VilleKoo

2,827
2
14
23

score 0 · Answer 2 · answered Dec 08 '16 at 11:36

0

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>

answered Dec 08 '16 at 11:36

Nikhil Nanjappa

6,454
3
28
44

Unfortunately this doesn't do what I need to do. How can I add a picture? I think that would be better. – user2508615 Dec 08 '16 at 11:42
here - http://meta.stackexchange.com/questions/85516/embed-image-in-stackoverflow – Nikhil Nanjappa Dec 08 '16 at 11:45
please have a look at the picture. I wanted the first span to be centered and the second one to be at the right to it and not move it to the left. – user2508615 Dec 08 '16 at 11:48
Ok i see, working on it - Added your image in the question itself not as part of the answer. – Nikhil Nanjappa Dec 08 '16 at 12:05

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

2 Answers2