How to center and position side by side two images? html css

Question

HTML:

<div id="ladoalado"><img src="imgs/login.png"><img src="imgs/cadastro.png"></div> 

CSS:

#ladoalado{
    float: left;
    margin: auto;
}

Code image:

Answer 1

You can use for example display:flex for that reason.

See how it looks in the example, I left the comments in the code.

#ladoalado{
    display: flex; /* coloca as imagens uma ao lado da outra */
    justify-content: center; /* alinha as imagens no centro da tela */
}

<div id="ladoalado"><img src="https://unsplash.it/100/100"><img src="https://unsplash.it/101/100"></div> 

Answer 2

Only by complementing the Hugocsl response, use the property justify-content: space-around;

justify-content: space-around; creates equal spaces before, between and after your HTML elements.

See in the example below...

#ladoalado{
   display:flex;
   justify-content: space-around;
   
}

<div id="ladoalado"><img src="https://unsplash.it/100/100"><img src="https://unsplash.it/101/100"></div>