Menu
I have 4 images within elements with captions within elements.
Each image is displayed under each other like:
IMAGE
caption
IMAGE
caption
IMAGE
caption
IMAGE
caption
I would like the images to appear like:
IMAGE IMAGE IMAGE IMAGE
caption 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>
815
You have the images enclosed within div tags, which are block elements. You should instead apply the style directly to the images, and do away with the divs, like this: <img style="max-width:20%" src="…"> Save this answer.
Just add a class with inline-block and that will do the trick.
We can use the float property and text-align property for the alignment of images. If the image is in the div element, then we can use the text-align property for aligning the image in the div.
I was thinking about:
figure {
width: 25%;
float: left;
margin: 0;
text-align: center;
padding: 0;
}
You can check it here: http://jsfiddle.net/cBkTc/3/
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
