I cant center the image in my passage for some reason

Authoring Twine
1

Twine Version:
[also choose a Story Format tag above]
2.6

So for some reason no matter what i do (I’ve given it an image id and used it in the stylesheet) this image wont change its position to the center:

HTML:

<a data-passage="Settings"><img id= "menuimg" src="C:\\Users\\home\\Downloads\\Cool-Text-433206938846765 (1).png" width="677" height="305" alt=" truepower.f " /></a>

//Test text.//

<<set $emptytext to " ">>

CSS:

#menuimg {

position: relative;

width: 977px;

height: 455px;

z-index: 50;

}

2

since you wrapped the image in a link, the image is at the center of the link, instead of the page. You could wrap the whole thing in a <centre> (or a <div> with the id #menuimg) instead.

3

What do you mean by that? (Im a noob at coding lol)
And if you mean (<center>) i already did that and it changed nothing

4 
<centre><a data-passage="Settings"><img id= "menuimg" src="C:\\Users\\home\\Downloads\\Cool-Text-433206938846765 (1).png" width="677" height="305" alt=" truepower.f " /></a></centre>

with a div

<div id="menuimg"><a data-passage="Settings"><img id= "menuimg" src="C:\\Users\\home\\Downloads\\Cool-Text-433206938846765 (1).png" width="677" height="305" alt=" truepower.f " /></a></div>
5

Yeah nothing changed

zbqzXhe.jpg1847×878 118 KB

6

Then there must be an interference from a parent element (either .passage or #passages or #story), probably some margin/padding.
You can use the Inspect Tool (click left, bottom of the menu) of your browser to see what is affecting your image not being placed in the center.

7

This what’s in my css for passages and story:

body {

color: #fff;
background-color: #000;
background-image: url(https://a-static.besthdwallpaper.com/city-night-art-wallpaper-2800x2100-81152_28.jpg);
font-family: ‘Inconsolata’, monospace;
text-align: center;

}

passage {
font-family: ‘Inconsolata’, monospace;
text-align: center;
}

#story {
text-align: center;
padding: .3em .55em .25em .35em;
border: 5px solid #324;
background-color: rgba(0, 0, 0, 0.8);
font-family: ‘Inconsolata’, monospace;
}

(Theres so many text-align: center’s cause they werent working)

8

(you can remove the doubles in css rules. whatever is set in #body for the font will be attached to any child (anything inside body))

Annnd we have it: padding: .3em .55em .25em .35em;
padding is set top → right → bottom → left. Here they are different values. So nothing will be fully centered…

9

do i set it all to the same thing?

10

Test it out and see what feels best :slight_smile:

11

OK Thanks for the help!