Center Horizontally

Asked

Viewed 1,467 times

3

Can’t seem to center my div in the middle of the page!

I tried to use what they posted in that post, in that other post, in the CSS Tricks and on a lot of other sites on google and I can’t center 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 didn’t want to do this to align it horizontally, I wanted to be able to align it only with CSS, but I don’t know if I cacad somewhere in the code I couldn’t align with anything I tried.

Thanks for the help!

html css front-end webdesign
  • 3

    I looked over and saw that you tried to use margin:0 auto; in div. login-container, if you remove the clear and float the div will be centralized.

  • @haykou solves it, but leaves me with another problem. The content of the div keeps following the size of the screen, coming at a time that gets very ugly. You know how I could do to limit this?

  • 1

    @haykou I was writing a reply and just now I saw your comment! Put a reply so you can receive the due credit of the solution :)

  • 1

    @Andreyhartung See the final part of my answer that contains the solution to the element width question.

  • 1

    @Zuul , quiet haha, your answer is more explanatory.

  • 1

    @Zuul I saw, I tidied up there and after I moved everything I remembered why I put the float and the clear, the layout without it gets a little pulled down about 10/15px, enough to bother seeing the screen...

Show 1 more comment

2 answers

3


Don’t despair, you’ve come to the right place!

To center your element, you have to get rid of the property float you have in it:

.login-container {
    margin: 0 auto;
}

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

Example

Example also available on Jsfiddle, actually 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>
<script src="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 that, because on wide screens it will be "weird", but you can set a width for your element:

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

See Jsfiddle.

0

For you to leave an element centered horizontally and vertically you have to leave it as absolute within a relative parent element, determining 100% height. And in the child element, absolute, 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;
}

Browser other questions tagged html css front-end webdesign

You are not signed in. Login or sign up in order to post.