Make the Flex theme center images

Posted on Wed 07 October 2020 in Tech

Previously I've been frustrated that the CSS in the Pelican Flex theme doesn't centre images. However, I'm only one user with one use-case, so I haven't raised a pull request.

Instead, I've finally gotten around to creating a quick-and-dirty sed string to fix the minified CSS file:

sed -i 's/}img{max-width:100%}/}img{max-width:100%;margin-left:auto;margin-right:auto;display:block}/' style.min.css

I also like my caption text to be italicised and centered, so I extended this a little:

sed -i 's/}img{max-width:100%}/}img{max-width:100%;margin-left:auto;margin-right:auto;display:block}figcaption{font-style:italic;text-align:center}' style.min.css

Run either of those in ./Flex/static/stylesheet. It'll modify just the img class in the CSS and suddenly all your images will center unless you tell them not to!