Positioning and Link Span help

[jony]

Hi everyone,

Two questions for you.

Please see this diagram: [http://i.imgur.com/dja3vOb.png](http://i.imgur.com/dja3vOb.png “http://i.imgur.com/dja3vOb.png”)

1 – how do i make two text links absolutely positioned on either side of a fixed centered image?

2 – how do i markup the links so that the tags sit on top of the main word and are aligned with the center of the page (left/right text align)?

Thanks!
Jony

[Paulie_D]

So you want them vertically centered **regardless** of the height of the the ‘outer’ div?

>so that the tags sit on top of the main word

Not sure what you mean by this.

Perhaps a better image example?

[jony]

Hi Paulie_D

Here is the actual design: [http://i.imgur.com/051Qwd6.png](http://i.imgur.com/051Qwd6.png “http://i.imgur.com/051Qwd6.png”)

[ChrisP]

@jony, I’m as confused as @Paulie_D on what you meant on point #2.

Here’s a codepen that replicates your design though:

http://codepen.io/ChrisPlz/pen/fxtCu

[jony]

@ChrisP @Paulie_D Sorry guys, the forum played a trick apparently. “so that the tags sit on top of the main word” should have read “so that the span sit on top of the main word”

This week’sBrunch
This week’sLunch

To me it makes sense that the lunch and brunch classes are text-aligned left and right, so that takes care of the positioning of the span (relative to the center); I just don’t know how to make the spans appear on top of the main word

[Paulie_D]

Why use spans?

No reason that can’t both be links wrapper in a h tag.: http://codepen.io/Paulie-D/pen/xckbi

If you **really** need this to be a single link there are other options.

Sometimes it’s best not to overthink these things.

[jony]

@Paulie_D, ideally when one hovers over the text, both the top and the bottom changes colours, which is why I assumed the span class was the way to go. Is there any other way you can think of?

[Paulie_D]

Well you **could** do that with a ‘adjacent’ selector.

[unasAquila]

I have [forked](http://codepen.io/unasAquila/pen/fEatb) @ChrisP Pen maybe helpful

[Paulie_D]

Second thoughts…sometimes a `
` and a `` is the simplest option.

http://codepen.io/Paulie-D/pen/wJmFB

[wolfcry911]

Here’s my quick and dirty pen

http://codepen.io/wolfcry911/pen/idwxs

[Author]

Posts