fix(image): Support the image to be centered when using a different H… #1618
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…TML element The current image component can only be centered with img element. It is not able to center when using a different HTML element, for example, an image link with anchor tag or a DIV container. This PR would support to center the image not only for img tag, but also for other HTML element by using `centered` flag. This PR would also support to display the group images horizontally center. Additionally the group images can now share the same vertical alignment as `top`, `middle` or `bottom` together or can have it's own vertical alignment. Closes: fomantic#1608
auto-assign
bot
requested review from
ColinFrick,
exoego,
y0hami,
lubber-de and
prudho
lubber-de
added
lang/css
lubber-de
approved these changes
Jul 29, 2020
lubber-de
removed
the
state/awaiting-reviews
This was referenced Jul 30, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR supports the image component to be centered horizontally which doesn't use HTML
imgtag. For example, using anchor tag as image link or a DIV container wasn't able to be centered in the page despite usingcentered imageclass name.The group images were supposed to be center when using
centeredclass name, but it never really were. It only set auto for left and right margin but with no width declaration which doesn't make the images to stay center. So, auto margin for left and right of the group images doesn't make sense and was removed in this PR. Instead, it's rendering as flex box and the images inside are now centered as it supposed to be.The group images can also share the same vertical alignment or can have independent alignment for it's own now.
Testcase
Before: https://jsfiddle.net/v759o1rb/1/
After: https://jsfiddle.net/5tpk3evz/1/
Closes
#1608