PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-03-31 00:37:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use flexbox for centering image blocks

Browse source
This commit is contained in:
Liam 2024-04-27 02:10:45 -04:00
parent f1a75e87f2
commit 1609de130a
1 changed files with 4 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/css/views/_images.scss
View file

@ -92,12 +92,6 @@ div.image-container {
overflow: hidden; overflow: hidden;
/* prevent .media-box__overlay from overflowing the container */ /* prevent .media-box__overlay from overflowing the container */
text-align: center; text-align: center;
a::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img, img,
video { video {
vertical-align: middle; vertical-align: middle;
@ -105,12 +99,12 @@ div.image-container {
max-height: 100%; max-height: 100%;
} }
/* Make the link cover the whole container if the image is oblong */ /* Make the link cover the whole container if the image is oblong */
a { a, picture, video {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-flex;
text-align: center; align-items: center;
vertical-align: middle; justify-content: center;
} }
} }