• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help How to align border to the middle?

lumbago

Back in Business
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 !!
NPCs
CHURCH OF THE WEEPING EYE




Code:
[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

Enthusiast
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

Back in Business
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 <3 Thank you so much !!
NPCs
CHURCH OF THE WEEPING EYE



 

Users who are viewing this thread

Top