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

0

HTML:

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

CSS:

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

Image of the code:

    
asked by anonymous 30.09.2018 / 17:46

2 answers

5

You can use for example display:flex for this.

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"><imgsrc="https://unsplash.it/101/100"></div> 
    
30.09.2018 / 17:56
0

Only by completing the Hugocsl response, use the 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"><imgsrc="https://unsplash.it/101/100"></div>
    
05.10.2018 / 03:48