How to move a logo inside the <div>

Asked

Viewed 328 times

0

I’m trying to center the logo on this panel by dragging it to the left.

inserir a descrição da imagem aqui

Here’s my HTML code where I quote it

<div class="logoLogin"> 
<img src="images/perfil-black.png">
<div>

I’ve tried to use padding and margin in the css sheet and I still can’t drag the logo to the left.

.logoLogin {
padding-top: 5px;
/* margin-bottom: 5px;*/
}

How can I fix this?

html css html5

  • And what CSS you’re using?

  • @Andersoncarloswoss whole sheet or part of padding/margin?

  • It might just be what’s wrong, starting from the external div to the image

  • If you use the margin: 0 auto; on div should leave it and its content centralized.

  • @Hamurabiaraujo did not work.

  • @Andersoncarloswoss put the CSS part.

  • @acmobile the margin: 0 auto; only works if the image is not float. Try putting something like display: block; margin: 0 auto; float: none;. Another thing that can help is to leave the image with max-width: 100%; because it seems that she is bigger than the div "father".

Show 2 more comments

1 answer

0

Hi @acmobile

.login-container {
/*So para ilustrar o seu problema*/
  max-width: 200px;
  height: 350px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background: #fff;
  padding: 15px;
  border-radius: 15px;
  margin: 0 auto;
}

.logoLogin {
  padding-top: 15px;
  width: 100%; /* Faz DIV ocupar todo o espaço do da sua DIV pai*/
  display: grid; /* Transforma sua DIV em um grid */
  justify-content: center;  /* Faz o alinhamento horizontal dos seus elementos no centro */
}

.logoLogin img {
  max-width: 100%;
  /*Garante que sua imagem não vai ultrapassar o seu tamanho maximo */
}
<div class="login-container">
  <div class="logoLogin">
    <img src="https://i.imgur.com/EoS17gh.png" />
   <div>
</div>

Browser other questions tagged html css html5

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