Fomantic-ui: [Image] "link" images are not centered

[layershifter]

Bug Report

The issue was originally reported in https://github.com/Semantic-Org/Semantic-UI/issues/4708 and then in https://github.com/Semantic-Org/Semantic-UI-React/issues/3953.

Steps to reproduce

1. Open a Fiddle
2. Mention that an image on bottom is not centered.

Expected result

All images are centered.

Actual result

Link images are not centered.

Testcase

https://jsfiddle.net/epc4nL2a/

Screenshot (if possible)

Version

2.8.6

[ko2in]

@layershifter , You don't need to specify centered image to your link. Here's fiddle: https://jsfiddle.net/sqr50cjh/

[layershifter]

@ko2in As I see you moved all CSS classes to img instead of a, however an example in SUI/FUI docs does the opposite: https://fomantic-ui.com/elements/image.html#image-link.

It feels confusing...

[ko2in]

@layershifter You're right that the doc looks confusing. I guess you should provide specific rule to your link to display as block if you're willing to present the image as a link and align center.

Currently, the center alignment only applies to img because it's displaying as block element as standalone. Maybe, we should explicitly set as block element for all .ui.centered.image.

I'll check later if I should submit PR for that.

[lubber-de]

@ko2in here is a quick jsfiddle. Providing display:block for any centered image seems to fix the issue.
However, for image groups it still does not work
https://jsfiddle.net/lubber/vu4bh3g1/5/

[ko2in]

@lubber-de Maybe, this should work: https://jsfiddle.net/spq9kLd3/

[lubber-de]

@ko2in Looks good! Will you prepare a PR?

[ko2in]

Yes. I'll do more investigations and prepare PR.

[lubber-de]

Fixed by #1618