1

Estou desenvolvendo um site e utilizando bastante de display: flex. O problema é que fui abrir o site no navegador Firefox e percebi que o mesmo não aplica essa propriedade. Até procurei em uns artigos sobre como
https://stackoverflow.com/questions/37306138/flexbox-not-working-properly-on-firefox-but-okay-on-chrome-safari

Mas essa solução não resolveu, segue meu codigo:

.body {
	width: 100%;
	background: url('../images/biblia-sagrada3.jpg') no-repeat fixed center;
	opacity: 0.9;
	background-size: 100%;
	display:flex;
    display: -webkit-box-flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box-flex;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	justify-content: center;
	align-items: center;
}
.container-login {
	background-color: #95afba;
	height: auto;
	width: 300px;
	padding: 15px;
	border-radius: 5px;
}
<body class="body">
    <div class="header fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                        <a href="index.html"><h1 class="site-title">RelatorioCCB.com</h1></a>
                </div>
                <div class="col-md-8">
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a href="login.html" class="nav-link">Logar</a>
                            </li>
                            <li class="nav-item">
                            <a href="#" class="nav-link">Registrar-se</a>
                            </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">Sobre</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-login">

        <div class="login-title">
            <h4 class="login-title-h4">
                Insira aqui os dados
            </h4>
        </div>
        <div class="form-group">
            <form action="#" method="POST">
                <!--<label for="name_login" class="">Login ou E-mail</label>-->
                <input type="text" class="form-control" name="name_login" placeholder="Login ou E-mail"><br/><br/>

                <!--<label for="name_pass">Senha</label>-->
                <input type="password" class="form-control" name="name_pass" placeholder="Senha"><br/><br/>

                <button class="btn btn-person btn-clear btn-block" type="submit">Limpar</button>
                <button class="btn btn-person btn-login btn-block">Login</button>
            </form>
        </div>

    </div>

</body>

Desde já agradeço se alguém puder me orientar;

1 Resposta 1

1

Amigo pelas classes que vc usou justify-content: center; e align-items: center; me parece que vc está tentando alinhar o form no centro da página. Mas isso só vai acontecer se a página tiver uma altura definida... Afinal como o pai do seu form que é o body, que não tem uma altura, assim como o HTML que tb não tem uma altura vc não tem uma referencia de height no documento para fazer o alinhamento vertical funcionar...

Então basta que vc coloque uma altura de 100% para o HTML e o body que seu código passa a funcionar.

inserir a descrição da imagem aqui

Veja o código da imagem acima.

html,
body {
    height: 100%;
}
.body {
	width: 100%;
	background: url('https://placecage.com/100/100') no-repeat fixed center;
	opacity: 0.9;
	background-size: 100%;
	display:flex;
    display: -webkit-box-flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box-flex;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	justify-content: center;
	align-items: center;
}
.container-login {
	background-color: #95afba;
	height: auto;
	width: 300px;
	padding: 15px;
	border-radius: 5px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />


<body class="body">
  <div class="header fixed-top">
      <div class="container">
          <div class="row">
              <div class="col-md-4">
                      <a href="index.html"><h1 class="site-title">RelatorioCCB.com</h1></a>
              </div>
              <div class="col-md-8">
                  <ul class="nav justify-content-end">
                      <li class="nav-item">
                          <a href="login.html" class="nav-link">Logar</a>
                          </li>
                          <li class="nav-item">
                          <a href="#" class="nav-link">Registrar-se</a>
                          </li>
                      <li class="nav-item">
                          <a href="" class="nav-link">Sobre</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>

  <div class="container-login">

      <div class="login-title">
          <h4 class="login-title-h4">
              Insira aqui os dados
          </h4>
      </div>
      <div class="form-group">
          <form action="#" method="POST">
              <!--<label for="name_login" class="">Login ou E-mail</label>-->
              <input type="text" class="form-control" name="name_login" placeholder="Login ou E-mail"><br/><br/>

              <!--<label for="name_pass">Senha</label>-->
              <input type="password" class="form-control" name="name_pass" placeholder="Senha"><br/><br/>

              <button class="btn btn-person btn-clear btn-block" type="submit">Limpar</button>
              <button class="btn btn-person btn-login btn-block">Login</button>
          </form>
      </div>

  </div>

2
  • Muito obrigado. Resolveu meu problema :) Commented 14/01/2019 às 14:45
  • @ClaitonBarreto legal, que bom que resolveu 💪
    – hugocsl
    Commented 14/01/2019 às 15:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .