Forums

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

Home Forums CSS Vertikal centering responsive bootstrap div

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #155693
    mckeene
    Participant

    Greetings

    I have a problem vertikal centering an responsive object at my page: Website

    After the slider i have a container box, whose height is decided by the two boxes inside it. It’s different depending on the screen size which box is tallest.

    I want the box that is not deciding the height to always be centered vertical.
    For now i’ve given the text box position: absolute; margin top and bottom: 50%; but this is only centering the top and not the middle of the box.
    Since it’s responsive the text box doesn’t have a fixed height.

    What can i do?

    Cheers

    #155705
    LlewellynCollins
    Participant

    You can try use flexbox see this answer http://stackoverflow.com/questions/15726740/vertically-centre-items-with-flexbox

    Or you can do it with code. Get the height of the box with javascript maybe also listen to the window resize event to make sure it is up to date. Then with postion: absolute and top: 50% have the margin-top be negative half the height of the box. eg #box{
    position: absolute;
    top:50%;
    margin-top: -50px; /* if the height is 100px */
    }

    #155710
    mckeene
    Participant

    Hi

    Thanks for you reply.
    Flexbox looks really clever, but not supported in IE7+8+9, so I don’t think that’s the solution and I don’t work with javascript so I’m a bit fucked :P
    I can’t believe there is no regular CSS method for doing this.

    #155796
    Merri
    Participant

    With no changes to HTML:

    html {
        display: table;
        height: 100%;
        width: 100%;
    }
    
    body {
        display: table-cell;
        padding-top: 90px; /* .navbar height */
        vertical-align: middle;
    }
    
    .navbar {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    

    And you may be lucky enough to see it working on IE8 as well.

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