sooo i'm trying to rework a profile and i'd ideally like it to be centered both vertically and horizontally. now, horizontal centering is no problem, but vertical centering has always been tricky. the thing is, i've done it successfully before, but when i try to use what is essentially the same code to do it again, it doesn't work! the profile is stuck to the top of the page for some reason. i've tried adding !important to various lines but it doesn't change anything. can anyone help me solve this?
you helped me with this the last time, maybe you can see what i'm doing wrong?
here is the code i used for Pinafore's profile, which is successfully centered in both directions.
SPOILER (click to toggle)
<style>
url('https://fonts.googleapis.com/css?family=Sacramento');
url('https://fonts.googleapis.com/css?family=Handlee');
, -ban, -ban-main, -lrc, -rrc, , , -right, , , , .bookmark, , , .prototip, , h2, .hustler, , , , .pet_age_info_date, .pet_wco_info_date {display: none}
, , {margin: 0!important; border: 0}
*{margin: 0; padding: 0}
-content, .notice {background: none; border: 0}
.container-fluid {margin: 0px}
html {
width: 100%; height: 100%;
background: url(http://i.imgur.com/cp5NKZN.jpg) left top repeat }
body {
height: 600px; width: 900px;
margin: auto; overflow: hidden}
{
display: flex;
flex-direction: row;
align-items: center}
{
height: unset!important; width: 900px;
background-color: transparent;
color: ; padding: 0!important;
font-size: 12px; font-family: bell mt;
text-shadow: 1px 1px rgba(255,255,255,0.3);
overflow: visible}
{
background: url(http://i.imgur.com/oI49Xpp.png) center center no-repeat;
height: 600px; width: 900px; margin: auto}
i {color: }
a, a:link, a:active, a:visited {color: }
a:hover {color: ; text-decoration: none; text-shadow: 1px 1px rgba(0,0,0,0.3)}
{
position: relative;
top: 3px; left: 550px;
font-weight: normal}
.pet_color_info {position: relative; top: 150px; left: -100px}
.owner {position: relative; top: 137px; left: 70px}
.pet_color_info img, .owner img, img {filter: grayscale(90%)}
.pet_like {position: relative; top: 124px; left: 95px; width:20px}
i.red.icon {color:!important}
.pet_name {
position: relative; top: 5px;
font-size: 40px;
font-weight: lighter; text-transform: none;
font-family: 'Sacramento', cursive}
{
position: relative;
left: -80px;
height: 350px; width: 350px;
background: url(http://i.imgur.com/KrufYNF.png);
filter: grayscale(20%)}
{
position: relative;
top: -800px; left: 800px;
height: 103px; width: 100px;
background: url(http://i.imgur.com/KSBIRWw.png)}
{
position: relative;
top: -170px; left: 760px;
height: 220px; width: 176px;
background: url(http://i.imgur.com/BXPeVtE.png)}
{
position: relative;
top: -860px; left: 62px;
height: 300px; width: 315px;
padding: 20px; border-radius: 15px;
border: 1px dashed ;
font-family: 'Handlee'; font-size: 14px;
line-height: 125%; overflow: hidden;
box-shadow: 1px 1px rgba(255,255,255,0.3)}
.credit {font-size: 11px; line-height: 110%; text-align: right}
{
position: relative;
top: -865px; left: 55px;
height: auto; width: 368px;
overflow: auto}
img {
height: 60px!important; width: 60px!important;
border-radius: 50px; border: 1px dashed ;
padding: 5px; opacity: 0.7;
filter: grayscale(20%);
transition:0.2s all ease;
box-shadow: 1px 1px rgba(255,255,255,0.3)}
.treasure_item {height: 60px!important; width: 60px!important; margin: 15px}
img:hover, .pet_spotlight img:hover {opacity: 1; border-radius: 15px}
.pet_spotlight {
position: relative;
top: -20px; left: 38px;
width: 100px;
padding: 10px; border-radius: 15px;
border: 1px dashed ;
text-transform: lowercase;
box-shadow: 1px 1px rgba(255,255,255,0.3)}
.pet_spotlight img {
height:0px; width:64px;
padding-bottom:64px; padding-top:0px;
background: url(http://i.imgur.com/2fl3G8z.png) left top no-repeat;
opacity: 0.9; filter: grayscale(100%);
transition:0.2s all ease;}
</style>
Recklessness is an artist's most valuable skill.
The ability to throw out conceptions of good and bad, to ignore the constant inner critic. The will to create without conscious intent or desire. Creation for its own sake – that is what we must strive for.
Draw a line. Draw a shape. Draw a face. On garbage paper. No sketchbook. No finished product.
Stitch a seam. It looks terrible. Stitch it again. Just shapes.
And over time, the shapes grow familiar. Over and over and over, bad and sloppy and reckless until I understand.
profile by
overlay by [userid=418864]
and here is the code for the new profile, which is not working even though i'm pretty sure all relevant parts of the code are identical!
SPOILER (click to toggle)
<style>
url('https://bug.bz/subeta/css/reset/pet.css');
.pet_age_info_date, .pet_wco_info_date, , {display: none}
html {
width: 100%; height: 100%!important;
background: url(https://i.imgur.com/5rPMkC3.png) left top repeat black;
}
body {
width: 882px; height: 624px;
margin: auto!important; overflow: hidden;
}
{
display: flex;
flex-direction: row;
align-items: center;
}
{
width: 882px; height: unset!important;
}
{
background: url(https://i.imgur.com/uea7Pxw.png) center center no-repeat;
width: 882px; height: 624px; margin: auto;
}
{
width: 260px; height: 260px;
background-image: url(https://i.imgur.com/ZCikxAv.png);
background-repeat: no-repeat;
background-size: 260px 260px;
position: relative;
left: 480px; top: 25px;
}
</style>
(ignore the @ user not found glitch, i promise the imports are done correctly but the forums mess them up)
oddly, when i copy and past the entirety of pinafore's profile code to a fresh pet profile without changing a single thing, the custom divs actually become misaligned - but the fundamental centering function still works. so... is something funky going on here??
;){kind=link}
;){kind=link}