Center Horizontally

Question

Center Horizontally

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

I can not centralize my div in the middle of the page!

I tried to use what they posted in this post , in this other post , in CSS Tricks and in a bunch of other sites on google and I can not centralize the div horizontally.

CSS:

html, body {
    height: 100%;
    width: 100%;
     background-color: red;

}
body {
    color: red;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/*Config da tela do login*/
.login-wrapper { 
    float: left; 
    clear: both;
    width: 100%;
    display: block;

}

.login-container {
    float: left;
    clear: both;
    margin: 0 auto;

}

/*configuração do form login*/
.btn-acessar{
    background-color: darkred;
    color: white;
    width: 75%;
}
.link { 
    float: left; 
    clear: both; 
    width: 100%; 
    padding: 10px 0; 
}

.link a {
    display: inline-block;
    color: white;
    text-decoration: underline;
    font-weight: 100;
    font-size: 0.8em;
}
.input-login{
    width: 75%;
    display:block;
    margin: 0 auto;
}

form img{
    width: 75%;
    padding: 0 0 20px;
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Titulo</title>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
        <link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>
        <link type="text/css" rel="stylesheet" href="main.css"/>
    </head>
    <body>
        <div class="login-wrapper">
            <div class="login-container">
                <form>
                    <img src="img/logo.png" alt="logo">
                    <div class="form-group">
                        <input type="email" class="form-control input-login" placeholder="Usuário">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-login" placeholder="Senha">
                    </div>
                     <button type="submit" class="btn btn-acessar">Acessar</button>
                </form>
                <div class="link">
                        <a href="#" class="col-xs-6">esqueci minha senha.</a>
                        <a href="#" class="col-xs-6">seja nosso cliente.</a>
                </div>
            </div>
        </div>
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
       </body>
</html>

To center it vertically I used JQuery, but I did not want to do that to align horizontally, I wanted to be able to align it just with CSS, but I do not know if I pooped somewhere in the code that I could not align with anything I tried. p>

Thanks for the help!

html css webdesign front-end

asked by anonymous 15.04.2015 / 19:24

2 answers

0

For you to leave a centered element horizontally and vertically you have to leave it as absolute within a relative parent element, determining height of 100%. And in the absolute child element, it should leave with automatic margin with values 0.

See in the code:

/*Config da tela do login*/
 .login-wrapper {
    position: relative; // Elemento Pai RELATIVE
    height: 100%; // Altura 100 %
    width: 100%;
    border:1px solid black;
    display: block; // Obrigatório quando se tem filhos com position ABSOLUTE.
}
.login-container {
    margin: auto; // Margin Automática 
    width:60%;   
    position: absolute; // Absolute - Obrigatório para centralizar verticalmente.
    height: 200px; // Obrigatório
    top: 0; // Valores 0, em todos.
    bottom: 0;
    left: 0;
    right: 0;
}

15.04.2015 / 19:58

How to make a negation condition with instanceof, without affecting the order of precedence? Display Alert according to an Ionic condition

score 3 · Accepted Answer

Do not despair, you've come to the right place!

To center your element, you have to see it free of the float property you have in it:

.login-container {
    margin: 0 auto;
}

What is above is enough for your element to stay in the center. The float will float the element to the indicated side, breaking the effect of the auto value on the margin-right and margin-left property.

Example

Example also available in JSFiddle , in fact assuming better formatting.

html, body {
    height: 100%;
    width: 100%;
    background-color: red!important;
}
body {
    color: red;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/*Config da tela do login*/
 .login-wrapper {
    float: left;
    clear: both;
    width: 100%;
    display: block;
}
.login-container {
    margin: 0 auto;
    max-width:60%;   /* adicionado para que o elemento possa ser visto centrado */
                     /* aqui no trecho de código da SE                          */
}
/*configuração do form login*/
 .btn-acessar {
    background-color: darkred;
    color: white;
    width: 75%;
}
.link {
    float: left;
    clear: both;
    width: 100%;
    padding: 10px 0;
}
.link a {
    display: inline-block;
    color: white;
    text-decoration: underline;
    font-weight: 100;
    font-size: 0.8em;
}
.input-login {
    width: 75%;
    display:block;
    margin: 0 auto;
}
form img {
    width: 75%;
    padding: 0 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="login-wrapper">
    <div class="login-container">
        <form>
            <img src="img/logo.png" alt="logo" />
            <div class="form-group">
                <input type="email" class="form-control input-login" placeholder="Usuário" />
            </div>
            <div class="form-group">
                <input type="password" class="form-control input-login" placeholder="Senha" />
            </div>
            <button type="submit" class="btn btn-acessar">Acessar</button>
        </form>
        <div class="link"> <a href="#" class="col-xs-6">esqueci minha senha.</a>
 <a href="#" class="col-xs-6">seja nosso cliente.</a>

        </div>
    </div>
</div>

Note:
I assume the desired width is not this, because on wide screens it will get "strange", but you can set a width for your element:

.login-container {
    margin: 0 auto;
    max-width:60%;
}

See JSFiddle .