html - Keep all images centered and seperate -


i'm trying keep 3 images centered in middle of window regardless of size of window. when resize window images collapse onto each other , squashed. appreciate help.

<style>      html, body {          height: 100%;          margin: 0;          padding: 0;          width: 100%;      }      body {          display: table;      }      .my-block {          text-align: center;          display: table-cell;          vertical-align: middle;      }  </style>    <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) ; margin: 0px;" />  <div>      <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png" style="position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);" />      <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png" style="position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); " />  </div>

you can keep 3 images centered – vertically , horizontally – in window sizes, few lines of code using flexbox.

html

<div id="container">    <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png">     <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png">     <img src="http://www.clker.com/cliparts/d/x/i/j/f/u/expences-button-png-hi.png"> </div>

css

html, body { height: 100%;}  #container {     display: flex;     flex-direction: column;     justify-content: center;    /* center images vertically (in case) */     align-items: center;        /* center images horizontally (in case) */     height: 100%; }

demo

to learn more flexbox visit:

note flexbox supported major browsers, except ie 8 & 9. recent browser versions, such safari 8 , ie10, require vendor prefixes. quick way add prefixes need, post css in left panel here: autoprefixer.


Comments

Post a Comment