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

how do I want to stay

HTML:

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

CSS:

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

Code image:

insert the description of the image here

Author: hugocsl, 2018-09-30

2 answers

Vc can use for example display:flex for this.

See how it looks in the example, I left the comment 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> 
 6
Author: hugocsl, 2018-09-30 15:56:16

Only supplementing the Hugocsl answer, use the property justify-content: space-around;

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

See 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>
 0
Author: OtavioCapel, 2018-10-05 01:48:48