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>

 

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...