how to automatically center images on slides?
incandescentman opened this issue · 2 comments
I believe I've tried all available org-mode to HTML and Markdown to HTML slideshow systems, and org-html-slideshow is still the best I've seen. I am having an issue, though, centering images in presentations. Forgive the newbie question, non-programmer here.
I have a lot of slides that consist of images. The org subtree looks like this:
* Foo Slide Title :slide:
[[/Users/foo/Dropbox/presentations/org-html-slideshows/bar/img/image.jpg]]
This works perfectly for generating slides with images, except that the images are left-aligned when I want them centered. I want them to align with the slide title, which is also centered horizontally.
I tried adding this CSS, but it had no effect:
p.image {
width: 100%;
margin-left: auto;
margin-right: auto;
}
This didn't work either:
.figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}
Can you help me make it so images get automatically centered? Thanks!
img,video,audio,iframe { display: block; margin: 0 auto; }
Try out this in your CSS file
body { background:rgb(120, 120, 120); margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }
OR
to center img
.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }