search

royfrancis / pixture

HTML Image Gallery in R with responsive layouts and lightbox
http://royfrancis.github.io/pixture/
GNU General Public License v3.0
11 stars 3 forks source link

Center gallery #2

Closed guilhermegarcia closed 2 years ago

guilhermegarcia commented 2 years ago

I've been trying to center the gallery but can't seem to figure it out. I've tried specifying that in my CSS file, but no success.

.html-widget {
    margin: auto;
}
guilhermegarcia commented 2 years ago

Solution: add this to your own css file (I took this from pixture.css, which is the stylesheet used and reset every time the rmd file is compile, so changing it there isn't very practical).

.pixture-gallery {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: stretch;
 align-content: stretch;
 margin: 1em 0;
}
royfrancis commented 2 years ago

I have updated the code to the use the images through img tags rather than background. This in a way fixes the centering issue as well since the gallery now takes up the full available width.