Responsive design: how to vertically center the text

[mattiafrigeri]

Hi guys,

I am working on a responsive website, and I need to keep the text (h3) of an “aside” widget always vertically centered (also when resizing the browser).

I made a pen here which explains the issue: http://cdpn.io/jJdGv

If you resize the window, the image will scale down, and I want the h3 element to remain in the centre (where you see the ribbon).

I tried these 2 solutions, none of them work:

1) If I make h3 absolute positioned, I cannot center it as it won’t consider its parent, so I have to give it fixed width: but it won’t be responsive!

2) making h3 it relaitve positioned forces me to use magic numbers, and those as well are not good for responsive web design

I also put online some images (correct and wrong situations) of the real site:

correct: http://developer.mattiafrigeri.it/css-tricks/ok.jpg

wrong: http://developer.mattiafrigeri.it/css-tricks/no.jpg

BONUS:

When I solve this, I have to make the ribbon outside of the image.. that will be a pain too: does a “scalable background” exist?

Thanks a lot guys!

[CodeGraphics]

You have to make the ribbon to be the background of the text. You align the text center.

[mattiafrigeri]

Yeah maybe, thanks Code. But that’s not the main problem. First I want to solve the other issue! ;)

[Paulie_D]

Here’s one way to get the text where you need it.: http://codepen.io/Paulie-D/pen/hfBGA

No positioning required at all, H3/link structure intact, text centers etc.

Frankly, I would try and do the ‘ribbon’ with a pseudo element rather than an image but if that’s the way you want to go.

Also, I don’t think it’s really appropriate to use a figure element there…that’s not what it’s for (non-sematic)….a div will work just fine but, in fact, you don’t need one.

An h3 is a block element already.

[Paulie_D]

>i think the picture is part of page content

I disagree. The real ‘content’ is the `h3` and he wants a background for that (effectively).

Hence my example which uses no special positioning etc. at all. There is, if you like, a magic number which is the line-height which will match the height of the bg image.

[mattiafrigeri]

Guys thanks for all yout support, I found this comunity to be very kind and… incredibly fast.
I’ll try your suggestions during the day and let you know… I’ve already seen something really interesting in your links, though!
See you later

[mattiafrigeri]

Hi,

first of all, the needs to be, as gcyrillus says, inside the html, because I have to change it dinamically.
So I am trying to work with your suggestion, but it’s kinda hard for me cause I can’t change the structure at this point using em instead. I’ll try again and come back later..

[mattiafrigeri]

Hi guys, finally I have done it: thanks you all, I used gcyrillus solution but partially, I decided not to render the text responsive, but in fixed pixels. You can see it here:

http://www.federicopesci.it/

I know there are a lot of things to be bettered, but it’s a start! Thanks a lot again!

[Author]

Posts