0 votes
by (140 points)
I am trying to centre an image horizontally on my screen on twinery in sugarcube. I have tried to increase the margins of just the image, but am doing something wrong.

1 Answer

0 votes
by (590 points)

Did you set the image display to block? If not, changing the margins won't fix it. If you want to center all images in your passages, you can put this in your stylesheet:

.passage img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

Otherwise, if you only want to center certain images, you can wrap them in a div and create a class for it with the same settings:

.passage .centered-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

Then use it in your passage like this: 

<div class="centered-image">
    [img[image_name.jpg]]
</div>

 

...