Vertical center doesn't work under Mozilla

Question

In iE and Chrome my container block is well vertically centered but not in Firefox. I don't understand because all the parent are well defined so it would be ok under every browser. Maybe there is a special toolkit under Mozilla for that kind of CSS but i didn't find it .

index.html.twig

{% block body %}

<div class="container">
    <div class="vertical-center-row">
        <div align="center">
            <div class="col-md-6 col-md-offset-3">
                <div class="col-xs-6">
                    <a href="{{ path('search_advert') }}">  <img src={{ asset('images/icones/buy_button.png') }} alt="buy_button" id="buy_button"class="img-rounded img-responsive"></a>
                </div>
                <div class="col-xs-6">
                    <a href="{{ path('sell_advert') }}">  <img src={{ asset('images/icones/sell_button.png') }} alt="sell_button" id="sell_button" class="img-rounded img-responsive"></a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Applied CSS :

html,body{
    height: 100%;
}

body {
    margin: 0;
    background: url('../../../../images/pictures/home_background.jpg');
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    padding-top: 6%;
    overflow: hidden;
}


/*general*/

#toHide{
    display: none;
}


/*center*/

.container{
    min-height: 100%;
    height: auto;
    display: table;
    vertical-align: middle;

}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

/* footer*/

#general-navbar{
    height: 6%;
}
#wrap{
    height: 94%;
}

#footer {
    background-color: #f5f5f5;
    height: 6%;
}
#footer-container{
    background-color: #f5f5f5;
    height: 100%;
    width:100%;
}

#clean-footer{
    clear:both;
}
.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;
    height: 100%;
    max-height: 100%;
    margin-right: -100000px;
    padding-right: 100000px;
}

/* responsive design*/

@media only screen and (max-width: 600px) {
    body {
        /* The file size of this background image is 93% smaller
           to improve page load speed on mobile internet connections */
        background: url('../../../../images/pictures/home_background.jpg');
        padding-top: 6%;    
    }
    .hide-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .viewport {
        margin-right: -600px;
        padding-right: 600px;
    }

    body {
        overflow: visible;
    }


}

So, my question is how to make it work under Mozilla Firefox?

Thanks in advance

@SLaks thanks for the answer, i didn't know flex so thanks to you i will use it for my future project :) it look really useful — LedZelkin, Sep 20 '15 at 17:41

victor175 · Accepted Answer · 2015-09-20T17:24:17.703

1

Horizontal centering:

For the object you need to center just use the following:

display: block;
margin-left: auto;
margin-right: auto;

It is absolutely cross-browser.

Edit:

Try to change container class styles like this:

.container{
    height: 100%;
    display: table;
    vertical-align: middle;
    background: green;
}

edited Sep 20 '15 at 17:24

answered Sep 20 '15 at 17:03

victor175

624
3
10
23

Or even the shortened `margin: 0px auto;`, but yes! – somethinghere Sep 20 '15 at 17:04
i want to center it vertically. It's already centered horizontally – LedZelkin Sep 20 '15 at 17:08
@somethinghere the shorthand is tricky, because later you can forget you have set the top and bottom margins to 0. But I guess it is a personal choice. – victor175 Sep 20 '15 at 17:09
Yeha makes sense. I just find that `0px auto` is an easy description for centering (: Anyhow, @LedZelkin vertical centering is a different matter and has been solved multiple times on stack overflow, please google it. Heres one: http://stackoverflow.com/questions/527811/css-vertical-centering – somethinghere Sep 20 '15 at 17:12
@LedZelkin Check my edit and tell me if it worked for you. – victor175 Sep 20 '15 at 17:24
@victor175 this only works if you line-height or text-size is the size of your container. – somethinghere Sep 20 '15 at 17:25
@victor175 Yes your edit work an all browser thx you a lot. But Why it was not working before with the min-height attribute ? – LedZelkin Sep 20 '15 at 17:38
1

@LedZelkin In Mozilla min-height attribute does not set the initial height sometimes. Probably if you had called clear: both; afterwards it would have worked. This happens, because such statements cause some of the page styles to recalculate. – victor175 Sep 20 '15 at 17:39

score 0 · Answer 2 · answered Sep 20 '15 at 17:16

0

You need to make the blocks you want aligned vertically inline or inline-block. vertical-align: middle; does not work on block elements.

answered Sep 20 '15 at 17:16

Destination Designs

683
1
5
17

1

This will only work if the line-height is set to the size of the content you want to center. Vertical aligning is just not a thing you can easily do or consistently use. – somethinghere Sep 20 '15 at 17:22

Vertical center doesn't work under Mozilla

2 Answers2