Help How to align border to the middle?

[lumbago]

I'm trying to align the image to the center, but I'm not sure what to add to make it work ;w; Please send help ;0;


Credit of the code to Ami's Lab 2.0 !!

Spoiler: code in question

NPCs

CHURCH OF THE WEEPING EYE​

Spoiler: code in code form

[comment][font=Rubik]:x[/font][/comment][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

margin: auto;
box-sizing: border-box;
max-width: 550px; /* Max width */
padding: 0px;

--bar-h: 5px;
--bar-bg: #ff5000; /* Bar colour */

--m: 0px 10px;

--str-w: 3px;
--str-p: 40px 0px 0px 0px;
--str-bg: #120a07; /* String colour */

--label-m: 6px 0px 0px 0px;
--label-p: 6px 0px 6px 1px;
--label-c: rgb(245, 245, 245); /* Label text colour */

--text-p: 10px; /* Text padding */
--text-bg: rgba(210, 190, 210, 0.2); /* Text background colour */
--f: 'Rubik', sans-serif; /* Font, change font tag above if you change this */][comment]-- Bar --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
height: var(--bar-h);
padding: 0px;
background: var(--bar-bg);][/border][comment]

-- Container --[/comment][border=transparent;
box-sizing: border-box;
padding: 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;][comment]

-- String Container --[/comment][border=transparent;
margin: var(--m);
box-sizing: border-box;
flex: 0 0 24px;
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][comment]-- String --[/comment][border=transparent;
box-sizing: border-box;
width: var(--str-w);
padding: var(--str-p);
background: var(--str-bg);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;][comment]-- Label --[/comment][border=transparent;
margin: var(--label-m);
box-sizing: border-box;
min-width: 20px;
padding: var(--label-p);
background: var(--bar-bg);
color: var(--label-c);
font-family: var(--f);
font-weight: bold;
letter-spacing: 1px;
line-height: 1.5;
writing-mode: vertical-lr;
transform: rotate(180deg);]NPCs[/border][comment]-- Knot --[/comment][border=transparent;
margin: 3px 0px;
box-sizing: border-box;
width: calc(var(--str-w) + 4px);
flex: 0 0 7px;
padding: 0px;
border-radius: 50%;
background: var(--str-bg);][/border][/border][/border][comment]-- String Container End --[/comment][comment]

-- Text --[/comment][border=transparent;
box-sizing: border-box;
flex: 1 1;
min-width: 240px;
padding: var(--text-p);
font-family: var(--f); font-size: 13px; text-align: justify;][CENTER][color=#ff5000][size=25px]CHURCH OF THE WEEPING EYE[/size][/COLOR][/CENTER]
[border="0; margin-top: 6px; height: 200px; width: 200px;background: url('https://cdn.discordapp.com/attachments/1037007758463094805/1037010210151211008/ezgif.com-gif-maker.jpg'); background-size: cover; background-position: 50% 70%; filter: saturate(80%);"][/border]


[/border][/border][/border]

 

[Ayama]

So in the final border with the image, where it says margin-top: 6px;, I would say to add a margin: auto;- that will center your image without changing anything else about the code.

 

[lumbago]

So in the final border with the image, where it says margin-top: 6px;, I would say to add a margin: auto;- that will center your image without changing anything else about the code.

I adore you :0 Thank you so much !!

Spoiler: new and improved!!

NPCs

CHURCH OF THE WEEPING EYE​

 

[Ayama]

I adore you :0 Thank you so much !!

Spoiler: new and improved!!

NPCs

CHURCH OF THE WEEPING EYE​

Haha you're welcome- glad I could help. Feel free to message if you have more questions~