Can't center an image in minimal mistakes github-pages-starter

Help
1

I’m using the minimal mistakes github pages starter (https://github.com/mmistakes/mm-github-pages-starter) and I’ve built the site locally. Everything seems fine so far but I can’t make .css code to work (I’m a total newbie with html/css). I want to be able to center images and preview them locally. I tried creating a main.scss/main.css file in the /assets folder. I copied the /_sass folder from the original minimal mistakes theme and tried adding the css code there at the minimal-mistakes.scss file. I’ve also tried to create a custom.css file and add the css code there, to no sucess.

I’m trying to use this:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

So I can write in markdown
<img src="paris.jpg" alt="Paris" class="center">.

I haven’t pushed changes to github yet because I want to still make some changes in repository, but the site is here anyway https://github.com/costarichard/costarichard.github.io

Any help is appreciated!

2

The theme ships with image alignment classes… see this post for some examples.

And here is the source code if you want to see how to apply them to Markdown images.

TL/DR:

![Paris](paris.jpg){: .align-center}
2 Likes
3

Thank you for the answer and thank you for the theme! If I want to resize the image and then center it, how should I proceed?

4

I’d suggest adding your own custom CSS classes to apply to images. Or modify the .align-center one to alter the width.

Follow the docs on how to customize the theme’s CSS.

1 Like