How to center the image?

0

Image that I want to fix, the logo is all right - > link

While on mobile - > link

And on the laptop - > link are correct.

My html code:

<!DOCTYPE html>
<html>
    <head>

    <meta charset="UTF-8">
    <title>Ensintech</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style-mobile.css">

    </head>

    <body>

        <header>
            <div class="container">
                <div class="row">
                  <div class="col-md-12">
                    <nav id="menu">
                        <ul>
                          <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                          <li><a class="aluno" href="#">Área do Aluno</a></li>
                        </ul>
                    </nav>
               </div>
             </div>
            </div>  
            <img id="logotipo" src="img/ensintech.png" alt="Logotipo">        
        </header>

        <div class="container_pagina_inicial">
            <div class="intro">
                <div class="div_centralizar">
                    <div class="logo"><img src="img/Egrande.png"></div>
                </div>         
            <p style="font-size:32px">
            Acesso Aluno
            </p>
            <p id="subtitulo">
            Digite seus dados de login para acessar o sistema
            </p>               
            <form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
                <div class="form-group">
                    <input type="email" class="form-control" id="email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Senha">
                </div>
            </form>        
            <button id="entrar" type="submit" class="form-control">Entrar </button>

            </div>
        </div>

        <div class="div_centralizar">            
            <p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p>
        </div>
            <div id="rodape"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

My main css code:

html{
    font-family: sans-serif;    
}
header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
.div_centralizar{
text-align:center;
}
.logo {
    text-align:center;
    display:inline-block;
    padding: 20px 0px 0px 0px;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
    text-align:center;
    color:#fff;
    font-weight: bold;
}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    text-align:center;
    margin:0 auto;
    margin-top:10px;
}
#subtitulo {
    font-weight:normal;
}
    
asked by anonymous 19.01.2018 / 17:54

2 answers

0

Your problem is in the .logo class, just hit display: inline-block;

.logo {
    /* display:inline-block; */
    text-align:center;
    padding: 20px 0px 0px 0px;
}

<!DOCTYPE html>
<html>
    <head>

    <meta charset="UTF-8">
    <title>Ensintech</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style-mobile.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

html{
    font-family: sans-serif;    
}
header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
.div_centralizar{
text-align:center;
}
.logo {
    text-align:center;
    /* display:inline-block; */
    padding: 20px 0px 0px 0px;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
    text-align:center;
    color:#fff;
    font-weight: bold;
}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    text-align:center;
    margin:0 auto;
    margin-top:10px;
}
#subtitulo {
    font-weight:normal;
}
</style>
    </head>

    <body>

        <header>
            <div class="container">
                <div class="row">
                  <div class="col-md-12">
                    <nav id="menu">
                        <ul>
                          <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                          <li><a class="aluno" href="#">Área do Aluno</a></li>
                        </ul>
                    </nav>
               </div>
             </div>
            </div>  

        </header>

        <div class="container_pagina_inicial">
            <div class="intro">
                <div class="div_centralizar">
                    <div class="logo"><img src="http://placeskull.com/300/300"></div></div><pstyle="font-size:32px">
            Acesso Aluno
            </p>
            <p id="subtitulo">
            Digite seus dados de login para acessar o sistema
            </p>               
            <form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
                <div class="form-group">
                    <input type="email" class="form-control" id="email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Senha">
                </div>
            </form>        
            <button id="entrar" type="submit" class="form-control">Entrar </button>

            </div>
        </div>

        <div class="div_centralizar">            
            <p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p>
        </div>
            <div id="rodape"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
    
19.01.2018 / 18:10
0

You can do this by just putting HTML in HTML <center><img></center>

If your css has something like "float: left or right" you get the whole float.

    
19.01.2018 / 18:05