I am trying to create an image gallery. To display captions beneath my images I am using the following code
<div>
<figure>
<img src="sample-image.png" />
<figcaption>Caption Here</figcaption>
</figure>
</div>
Now the problem is when I run the gallery page the images looks like following(figure-1). The second image goes down. I want to display the images like in figure-2, but I don't know what CSS code to write for this or how to fix it. Would you please kindly help me?
Thanks in Advance :)
basically just set
display: inline-block; white-space: normal;
for figure andwhite-space: nowrap;
to theirs parent (assuming your figures are wrapped in a common container)Then you will need to make some small adjustments using other properties, (like
vertical-align
)see this example fiddle: http://jsfiddle.net/CDkNV/