CODEWITHSUNDEEP
htmlcssfirefoxcross-browser
LedZelkin
LedZelkin

Reputation: 586

Vertical center doesn't work under Mozilla

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

Upvotes: 0

Views: 774

Answers (2)

victor175
victor175

Reputation: 624

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;
}

Upvotes: 1

Destination Designs
Destination Designs

Reputation: 683

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

Upvotes: 0

Related Questions