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
Post a Comment