Подскажите по правильности верстки HTML с картинкой

[Владислав_82]

Есть код с изображениями. При добавлении его на страницу изображения выстраиваются вертикально, надпись над каждым изображение слева в углу.
<p>JP бордо<br>
<img src="http://esmagazin.ru/wa-data/public/photos/01/00/1/1.200x0.jpg" style="width: 200px; height: 200px; " alt="">
</p>
<p>
JP голубой<br>
<img src="http://esmagazin.ru/wa-data/public/photos/02/00/2/2.200x0.jpg" style="width: 200px; height: 200px; " alt="">
</p>
<p>
JP зеленый<br>
<img src="http://esmagazin.ru/wa-data/public/photos/03/00/3/3.200x0.jpg" style="width: 200px; height: 200px; " alt="">
</p>
<p>
Вот так.

Но это не то что нужно.

 

Необходимо чтобы фотографии выстраивались горизонтально, а надпись была над каждым фото посередине (если возможно.)
Если фото не влезает в сточку то автоматически переноситься на следующую.

вот так хотелось бы но с надписями над каждой фотографией посередине сверху.

[Владислав_82]

ап

[Stright]

http://cssdeck.com/labs/bgrg3p2d

Так?

[npofopr]

ап

изучайте основы html и css.

float: left; вам в помощь или display: inline-block;