Skip to content

Commit 51ca1ed

Browse files
authored
fix(image): support centered div and adjusted aligned groups
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: #1608
1 parent 9866014 commit 51ca1ed

File tree

1 file changed

+20
-4
lines changed

1 file changed

+20
-4
lines changed

src/definitions/elements/image.less

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,27 +91,36 @@ img.ui.image {
9191
Vertical Aligned
9292
-------------------*/
9393

94-
.ui.top.aligned.images .image,
9594
.ui.top.aligned.image,
9695
.ui.top.aligned.image svg,
9796
.ui.top.aligned.image img {
9897
display: inline-block;
9998
vertical-align: top;
10099
}
101-
.ui.middle.aligned.images .image,
102100
.ui.middle.aligned.image,
103101
.ui.middle.aligned.image svg,
104102
.ui.middle.aligned.image img {
105103
display: inline-block;
106104
vertical-align: middle;
107105
}
108-
.ui.bottom.aligned.images .image,
109106
.ui.bottom.aligned.image,
110107
.ui.bottom.aligned.image svg,
111108
.ui.bottom.aligned.image img {
112109
display: inline-block;
113110
vertical-align: bottom;
114111
}
112+
.ui.top.aligned.images .image,
113+
.ui.images .ui.top.aligned.image {
114+
align-self: flex-start;
115+
}
116+
.ui.middle.aligned.images .image,
117+
.ui.images .ui.middle.aligned.image {
118+
align-self: center;
119+
}
120+
.ui.bottom.aligned.images .image,
121+
.ui.images .ui.bottom.aligned.image {
122+
align-self: flex-end;
123+
}
115124
}
116125

117126
& when (@variationImageRounded) {
@@ -250,11 +259,18 @@ img.ui.image {
250259
}
251260

252261
& when (@variationImageCentered) {
253-
.ui.centered.images,
254262
.ui.centered.image {
263+
display: block;
255264
margin-left: auto;
256265
margin-right: auto;
257266
}
267+
.ui.centered.images {
268+
display: flex;
269+
flex-direction: row;
270+
flex-wrap: wrap;
271+
align-items: stretch;
272+
justify-content: center;
273+
}
258274
}
259275

260276
/*--------------

0 commit comments

Comments
 (0)