css - How to center 2 images within a single DIV -

i have div tag contains 2 tags. want these figures center within div, supposed centering within middle of page. how do this?

html:

<div class="images-captions">     <figure><img src="images/prop pics/from mike b aka stratosdadri/intial-blueprinting_thumb.jpg" alt="intial blueprinting"><figcaption>after intinal blueprint</figcaption></figure>     <figure><img src="images/prop pics/from mike b aka stratosdadri/after-damage_thumb.jpg" alt="after damage"><figcaption>after damage</figcaption></figure> </div> 

css:

.images-captions            { width: 600px; margin: 0 auto; } .images-captions figure     { float: left; width: 250px; padding: 10px;} .images-captions figcaption { text-align: center; font-style: italic;   } 

center them horizontally

this case solve this:

css

.images-captions {     width: 600px;     margin: 0 auto;     text-align: center; }  .images-captions figure {     display: inline-block;     width: 200px;     margin: 0;     padding: 10px; }  .images-captions figcaption {     font-style: italic; } 

demo

try before buy

center them vertically

you can solve this:

css

.images-captions {     width: 600px;     margin: 0 auto;     text-align: center; }  .images-captions figure {     width: 200px;     margin: 0 auto; }  .images-captions figcaption {     font-style: italic; } 

demo

try before buy