Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1
So, I’m trying to add a picture to the beginning of my story, and no matter what I do, I can’t center the image. Here is an image of what it looks like. The text is centered, but the image is very obviously not.
I’ve tried many different methods, using CSS, writing it directly in the text, but nothing has made it centered. Is it because the image is too big? Because other, smaller images I use can be centered just fine.
The style that you used in the img tag aligns it relative to the page. Instead, you should apply no style, and it will be center-aligned along with the text itself.
<img src="images\Front\Cover.png" height="413" width="1016">
Other Start passage text...
Then in a stylesheet passage, put this (it sounds like you already have this):
.passage {
text-align: center
}
Also consider that your image, combined with the Sugarcube siderbar, is wider than some computer screens. Instead, you can just use the image without dimensions and have it automatically resize relative to the visible area of Sugarcube. Like this:
<img src="images\Front\Cover.png" style="width: 100%">
Other Start passage text...
Would I need to replace the .passage with the name of the passage the image is in?
Also, for the percentage, the image I have is very large. If I use percentage instead of straight pixel size, it will automatically resize depending on the screen it’s on, so it always looks relatively the same no matter the screen size?
You can tag the Start passage with centerme and create a stylesheet containing this. Then you can reuse the style across various passages by tagging them with centerme as well.
.passage.centerme {
text-align: center
}
Or, if you only plan on centering text in the Start passage, you can just remove the style from the stylesheet and put it in the Start passage itself.
<style>
.passage {
text-align: center
}
</style>
The percentage is relative to screen width. So you could make a gigantic image tens of times larger than you currently have and it will always scale down to fit the screen.
However, Sugarcube has styles of its own where you will start to cut off your image if the window becomes too small. Changing the size of the image won’t solve this.
To see what it would look like on smaller monitors, you can just resize your browser window. The effect is the same for all practical terms. Firefox and Chrome also have a feature called responsive design mode with pre-set screen sizes.
The image still looks the same. I tried both of your methods, and the image is still not centered like the text is. Are you sure it’s text-align? Since it’s not text im aligning.
