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)?
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?
Here is the actual design: [http://i.imgur.com/051Qwd6.png](http://i.imgur.com/051Qwd6.png “http://i.imgur.com/051Qwd6.png”)
@jony, I’m as confused as @Paulie_D on what you meant on point #2.
Here’s a codepen that replicates your design though:
@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”
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
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.
@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?
Well you **could** do that with a ‘adjacent’ selector.
I have [forked](http://codepen.io/unasAquila/pen/fEatb) @ChrisP Pen maybe helpful
Second thoughts…sometimes a `` and a `` is the simplest option.
Here’s my quick and dirty pen
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".