> ## Content Index
> Fetch the complete content index at: https://blog.themarfa.name/llms.txt
> Use this file to discover other available public pages before exploring further.

# Хитрости Postach.io. Как добавить подписи к картинкам
- URL: https://blog.themarfa.name/khitrosti-postach-io-kak-dobavit-podpisi-k-kartinkam/
- Published: 2014-07-27T19:16:15.000Z
- Updated: 2018-08-22T07:46:25.000Z
- Author: Константин Докучаев
- Tags: postachio

Как, возможно, вы уже знаете Postach.io добавили возможность создавать посты при помощи .html файлов. Это открывает массу возможностей для оформления вашего блога. Конечно, рассказывать тут можно до бесконечности, т.к. теперь нам дали блог-платформу с полноценной поддержкой .html тегов. Но сегодня я все-таки расскажу о том, как можно украсить отображение картинок в вашем блоге.

###### 

Документация по добавлению .html файлов находится [здесь](http://help.postach.io/tag/creating-posts "Creating Posts").

### Figcaption

Тег figcaption позволяет добавлять подписи к вашим картинкам. Выглядит это примерно так:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/15a777df-babb-4b01-843d-3441597fdc26.png)

###### 

Код выглядит очень просто:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/31396c36-11fb-4387-8d27-e833afb44f90.png)

###### 

Я уже однажды [описывал](http://themarfa.name/thoughts/2013/01/figure.html "CSS Snippet: одинаковая ширина figcaption и figure") проблему, которую вызывает такой метод. Когда подпись к картинке может быть шире. Поэтому еще раз вкратце напишу ее решение.

###### 

Код CSS:

\`figure{display:table}

figcaption{display:table-caption; caption-side:bottom}\`

display:table-caption - не позволяет быть figcaption шире картинки.

caption-side:bottom - положение figcaption относительно картинки. Может иметь свойства: top, right, bottom и left.

###### 

Этот маленький хак показывает, что теперь внешний вид вашего блога ограничен лишь вашим воображением и знанием HTML и CSS. Если у вас есть какие-то вопросы связанные с оформлением вашего блога, можете смело спрашивать в комментариях.

###### 

[Исходники и демо](http://jsfiddle.net/4D3eu/ "Source code and demo")