Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive design: how to vertically center the text

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45179
    mattiafrigeri
    Participant

    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!

    #137248
    CodeGraphics
    Participant

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

    #137249
    mattiafrigeri
    Participant

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

    #137252
    Paulie_D
    Member

    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.

    #137257
    Paulie_D
    Member

    >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.

    #137397
    mattiafrigeri
    Participant

    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

    #137400
    mattiafrigeri
    Participant

    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..

    #135524
    mattiafrigeri
    Participant

    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!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.