How to display <figure> images on a single line of HTML / CSS

Question

I have 4 images inside the elements with labels inside the elements.

Each image is displayed under each other, for example:

IMAGE
signature

IMAGE
signature

IMAGE
signature

IMAGE
signature

I would like the images displayed as follows:

PICTURE PICTURE PICTURE PICTURE
caption caption caption

My HTML:

<div id="earlylife_images"> <figure> <img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150"> <figcaption>A young Roger Moore</figcaption> </figure> <figure> <img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150"> <figcaption>Roger Moore in his 30's</figcaption> </figure> <figure> <img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150"> <figcaption>Roger Moore as James Bond</figcaption> </figure> <figure> <img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150"> <figcaption>Roger Moore in more recent years</figcaption> </figure> </div> 

Answer 1

I'm thinking of:

 figure { width: 25%; float: left; margin: 0; text-align: center; padding: 0; } 

You can check it here: http://jsfiddle.net/cBkTc/3/

Answer 2

Make a figure inline-block .

 figure { display: inline-block; }