How to center the image?

Asked

Viewed 1,683 times

0

Picture I want to fix, the logo is all right -> http://prntscr.com/i2qrez

While on mobile -> http://prntscr.com/i2qrl0

And on the laptop -> http://prntscr.com/i2qsdw 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>
    <script src="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;
}
html css

  • Which browser and browser version is showing the error?

  • Google Chrome Version 63.0.3239.132 (Official version) 64 bits My monitor is very large - 1920x1080

  • Try it this way to see if it goes. logo { text-align:center; display:inline-block; padding-top:5%; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

  • It wasn’t, at most it lowered it a little.

  • Hello friend! I know the question has already been solved, but I would like to know on which device the image was on the right. Since you said in the question that on cell phone and laptop was ok.

  • was error in my main css code, on PC-Desktop - resolution 1920x1080, was getting right because of the " display: inline-block"

Show 1 more comment

2 answers

0

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

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

  • <div class="logo"><center><img src="img/Egrande.png"></center></div> put it like this and it wasn’t. If I have to take the div class soon, it’ll be a job, there’s some solution?

  • Strip the " text-align: center; " of the logo’s css and try again.

  • was display:inline-block; there it was blurring, but thank you very much for the attention. all good for you.

0


Your problem is in class .soon, just take out 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>         
            <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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

  • Thank you man, silly mistake my, thank you very much !

  • @Franciscoscocarlosworth knowing that it worked! If my answer helped you in any way consider marking the Reply with "Accept" ✔

  • where you mark that?

  • In my answer the left at the top has two arrows one up and one down. Just below these arrows has a ✔, just click on it ;)

  • Below the number 1 rss

  • Wanted to know where you tested this? Since the question says that on laptop (same thing as desktop in this case) and mobile phone is ok. Just take display: online-block does not explain anything and does not influence anything.

  • DVD I don’t know its screen resolution, but after 1900px was giving error with his code, but removing this class even up to 2500px wide the image is centralized. Another thing, if the author gave ok eh pq he tested and it worked, as you can see here in the comments of the answer. I advise you to take the test also on a monitor of great resolution other than a smartphone or a Notebook

Show 2 more comments

Browser other questions tagged html css

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