Ajuda com posicionamento de uma legenda(figcaption) dentro de uma figure.

[fernandodenardin 0]

Olá pessoal tenho um site que tem uma área de notícias, a maior parte das notícias tem imagens e estas imagens tem legenda.

Uso como editor de notícias o CKEditor, e funciona 100%.

 

Estou com um problema no meu CSS e após vários dias de pesquisas não consegui resolver.

 

O meu problema é que ao centralizar uma imagem a legenda fica alinhada para esquerda em um quadrinho pequeno. Conforme imagem abaixo:

 

Se eu uso alinhamento à esquerda ou à direita, funciona normalmente. Conforme imagem abaixo:

 

Algumas observações.

- a legenda(<figcaption> não pode ser mais larga do que o <figure>.

 

Código desta imagem que o CKEditor montou(deixei com alinhamento centralizado que é quando dá o erro):

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="150" src="/imagesnoticias/images/25_02_2017_20_23_08%20(1).jpg" width="250" />
<figcaption>Ut porttitor ut quam eu malesuada. Nunc nec iaculis dui, quis efficitur velit. Integer consequat lectus in fermentum condimentum.</figcaption>
</figure>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas convallis dapibus. Nullam rutrum justo eget dictum tempus. Sed vitae sagittis tortor, vel bibendum justo. Nullam pulvinar libero a imperdiet faucibus. In mattis vehicula volutpat. Quisque in velit massa. Cras ligula ex, dignissim ac venenatis vitae, rhoncus id nisl. Morbi maximus, nisi sit amet efficitur facilisis, ex urna volutpat massa, nec vestibulum erat dolor a massa. Cras ut nunc fringilla, gravida tortor id, egestas urna. Nullam non sapien id libero lacinia maximus vel vel libero. Aliquam quam tortor, scelerisque a est et, ullamcorper scelerisque nisi. Pellentesque nibh augue, bibendum ac mi sit amet, condimentum sodales quam. Sed nec dolor ut nisi tristique rhoncus quis ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nunc non mi lobortis congue.</p>

Segue o meu CSS destes itens:

figure {
display: table;
background: #f5f5f5;
border-width: 1px 1px 1px 1px;
border-style: double;
border-color: lightgray;
padding: 2px;
margin: 3px 8px 8px 0px;
}

figcaption {

display: table-caption;
font-size: 11px;
background: #f5f5f5;
border-width: 0px 1px 1px 1px;
border-style: dotted;
border-color: lightgray;
caption-side: bottom;
margin: 0 auto;
max-width: 100%;
padding: 2px;
text-align: center;
}

Alguém poderia me dar uma ajuda ou alguma ideia para solução deste problema?

 

Desde já agradeço a atenção de todos.