Hi all. I’m trying to design a horizontal stepper nav (circle w/number, text centered under circle, line connecting to next circle, etc. Using to show Step 1, Step 2, Step 3).

The number circles and description text under each are centered vertically. I want the line that connects to the next circle to be centered horizontally to the number circles. What’s happening now is the lines can’t get close to the circles because they are controlled by the text boxes (which are varying widths).

I tried separating each but it appears that horizontal alignment and vertical alignment can’t function at the same time.

I want this: (hope this looks like how I typed, sorry if jumbled)

  O------------------O------------------O 

Circles represent number circles for Step #. Under number circles will be words that are different per step (longer/shorter)

Anyone know how I can do this?

Many thanks in advance