Centering Text around a Square Image

Hoping someone can assist. I basically have a square image depicting a diagram and what I would like to do is to be able to place url link descriptions of what the diagram represents at 12, 3, 6 and 9 o’clock positions.All centered along the top, middle left and right of image as well as bottom.Top and bottom url description links …

via Css Website development » Search Results » ajax:

Centering Text around a Square Image

Hoping someone can assist.
I basically have a square image depicting a diagram and what I would like to do is to be able to place url link descriptions of what the diagram represents at 12, 3, 6 and 9 o’clock positions.
All centered along the top, middle left and right of image as well as bottom.
Top and bottom url description links should be ok but I am unsure how to center my text on both the left and right hand side of the image.
Hope this makes sense.
Thanks.
……………………………

Just use absolute positioning to place elements where you need them to be. Create a relatively positioned div. Set up image as a background for it and place all the elements within that div with absolute positioning. Hope that helps!
……………………………

The easiest approach is likely to use tables, but I’ve used a list and nested-list. There’s a demo posted at jsbin, using the code below:




For more info: Centering Text around a Square Image

Css Website development » Search Results » ajax

Centering Text around a Square Image

Share this post:

Related Posts

Leave a Comment