html - Aligning multiple images -


i beginner in web coding, started making exercise see can do.

i have tried align 5 images, , have been searching anywhere on web until when find out found complicated me now, due limited knowledge.

#poze {align:"center"}
<div id="poze">    <img src="rsz_1rsz_2000px-color_icon_greensvg.png" alt="green" style="padding:3px;border:3px solid black;" />    <img src="rsz_rsz_2000px-color_icon_bluesvg.png" alt="blue" style="padding:3px;border:3px solid black;" />    <img src="rsz_rsz_2000px-color_icon_yellowsvg.png" alt="yellow" style="padding:3px;border:3px solid black;" />    <img src="rsz_1rsz_2000px-color_icon_redsvg.png" alt="red" style="padding:3px;border:3px solid black;" />    <img src="rsz_1rsz_2000px-color_icon_purplesvg.png" alt="purple" style="padding:3px;border:3px solid black;" />  </div>

anything tried, complicated things, didn't work. there possible way in html , without css? or if css needed, there simple method?

you're looking vertical-align: middle;

#poze {  	text-align: center;  }  #poze img {  	padding: 3px;  	border: 3px solid black;  	vertical-align: middle;  }
<div id="poze">  	<img src="http://lorempixel.com/32/32" alt="green" />  	<img src="http://lorempixel.com/48/48" alt="blue" />  	<img src="http://lorempixel.com/32/16" alt="yellow" />  	<img src="http://lorempixel.com/16/64" alt="red" />  	<img src="http://lorempixel.com/32/32" alt="purple" />  </div>

this works because img elements display: inline; default.

see mozilla's excellent css documentation more info: https://developer.mozilla.org/en/docs/web/css/vertical-align


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -