问题描述:

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

网友答案:

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;
}
网友答案:

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

相关阅读:
Top