Forums

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

Home Forums CSS [Solved] Vertically centered div issue

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #205079
    niclamarino
    Participant

    Hi there, I’m trying to vertically center a div but I can’t achieve that. I’ve tried using:

    display: table-cell;
    vertical-align: middle

    It cuts the content div, not even the overflow works. Do you know where’s the problem?

    Here’s the link to the page. I need the tree circles to be center vertically: http://niclamarino.altervista.org/Layouts/TerreDelBuono/splash-page.html

    #205082
    Paulie_D
    Member

    What I think you actually want is to center the whole ul that contains all the divs vertically…don’t you?

    There’s a few ways to do that.

    https://css-tricks.com/centering-css-complete-guide/

    By the way all those break tags [ br/ ] used for spacing…don’t do that. It’s very poor practice and there are much better options available

    #205083
    Paulie_D
    Member

    So something like this:

    .ch-grid {
        /* margin: 20px 0 0 0; */
        padding: 0;
        list-style: none;
        display: block;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    #205168
    nfewd
    Participant
    #205205
    niclamarino
    Participant

    I’ve solved using the Paulie_D code, using top:45%;

    Thank you very much!

    #205383
    alxfyv
    Participant

    Another possible solution is to use Flexbox. See A Complete Guide to Flexbox.

    See the Pen le terre del buono at CodePen, forked from @nfewd‘s pen and modified to use Flexbox. Only .ch-grid and .ch-grid li have been modified.

    #205394
    Paulie_D
    Member

    Indeed, I’m loving flexbox…I recommend it but my only concern right now is the level of browser support as it’s IE10+.

    Now that might be fine depending on the audience but my feeling right now is that it might be a little premature.

    I guess feature detection would be the optimal method with suitable fallbacks.

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