How to center and position two images side by side? html css
HTML:
<div id="ladoalado"><img src="imgs/login.png"><img src="imgs/cadastro.png"></div>
CSS:
#ladoalado{
float: left;
margin: auto;
}
Code image:
0
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