How do I center this

Status
This thread has been locked.
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
Hey! trying to centre this image vertically but I'm stuck any ideas?

Screenshot 2020-02-23 at 18.51.17.png

Screenshot 2020-02-23 at 18.50.17.png
 

Attachments

  • Screenshot 2020-02-23 at 18.50.17.png
    Screenshot 2020-02-23 at 18.50.17.png
    39.1 KB · Views: 91
  • Screenshot 2020-02-23 at 18.51.17.png
    Screenshot 2020-02-23 at 18.51.17.png
    37.8 KB · Views: 93
Click to expand...
PebbleHost
High performance, consistent uptime and fast support. Minecraft hosting that just works.
Joshua C

Joshua C

Web Developer & Designer
Supreme
Feedback score
106
Posts
1,328
Reactions
470
Resources
0
Display: flex;
Justify-content: center;
Align-items:center:
min-height: 100vh;

Assign this to the body since you’re making a full page, or just assign it your class

this will make the div have full size of the screen along with centering the item.
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
Joshua C said:
Display: flex;
Justify-content: center;
Align-items:center:
min-height: 100vh;

Assign this to the body since you’re making a full page, or just assign it your class

this will make the div have full size of the screen along with centering the item.
Click to expand...
that had no effect :/
 
Banned forever. Reason: Leaking user resources
hgbf

hgbf

Confirm onsite ≋ hgbf#6395
Supreme
Feedback score
24
Posts
854
Reactions
629
Resources
0
Try
Code: 
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
Banned forever. Reason: Leaking user resources
hgbf

hgbf

Confirm onsite ≋ hgbf#6395
Supreme
Feedback score
24
Posts
854
Reactions
629
Resources
0
AnnaThePanda34 said:
hmm that didn't work either, I don't think im cut out to do web design haha :p[DOUBLEPOST=1582485427][/DOUBLEPOST]
kinda got me confused sorry :/
Click to expand...
You might have to also add "min-height: 100vh;" if you don't have that yet.
 
pace

pace

average physics enjoyer
Supreme
Feedback score
40
Posts
856
Reactions
491
Resources
0
AnnaThePanda34 said:
hmm that didn't work either, I don't think im cut out to do web design haha :p
wait I think I got it
[DOUBLEPOST=1582485427][/DOUBLEPOST]
kinda got me confused sorry :/
Click to expand...
the answer gives u the many ways you can do to center it
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
hgbf said:
You might have to also add "min-height: 100vh;" if you don't have that yet.
Click to expand...
well its now centred vertically thanks, however it is no longer centred horizontally :/
 
Banned forever. Reason: Leaking user resources
pace

pace

average physics enjoyer
Supreme
Feedback score
40
Posts
856
Reactions
491
Resources
0
Also i'd recommend fixing your code you don't have a <!DOCTYPE html> <html> nor a <head> and u have closed <body> keeping content outside do you want me to send u a fixed version?

and instead of span use div's
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
pink said:
Also i'd recommend fixing your code you don't have a <!DOCTYPE html> <html> nor a <head> and u have closed <body> keeping content outside do you want me to send u a fixed version?
Click to expand...
it's okay, ill add it now. Sorry im new to html & css. Just trying to make my own webpage considering that I can't afford a web developer to do it :(
 
Banned forever. Reason: Leaking user resources
pace

pace

average physics enjoyer
Supreme
Feedback score
40
Posts
856
Reactions
491
Resources
0
AnnaThePanda34 said:
it's okay, ill add it now. Sorry im new to html & css. Just trying to make my own webpage considering that I can't afford a web developer to do it :(
Click to expand...
no worries.

Goodluck! i'd recommend looking around web on ways to start learning like w3schools and stackoverflow contains all your answers
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
pink said:
Also i'd recommend fixing your code you don't have a <!DOCTYPE html> <html> nor a <head> and u have closed <body> keeping content outside do you want me to send u a fixed version?

and instead of span use div's
Click to expand...
actually yes please, im confused again aha
 
Banned forever. Reason: Leaking user resources
pace

pace

average physics enjoyer
Supreme
Feedback score
40
Posts
856
Reactions
491
Resources
0
AnnaThePanda34 said:
actually yes please, im confused again aha
Click to expand...
this is the structure you follow
<!DOCTYPE html>
<html>

<head>
meta's , stylesheets, links etc
</head>
<body>
content you want to view on the site
</body>
</html>
and since hgbf seems to have free time i guess he can explain everything to you haha.
hgbf said:
Add me on Discord: hgbf#6395. I'll help you get started.
Click to expand...
 
Annabella

Annabella

QUIT - SERIOUS HEALTH ISSUES AND WELL YEAH :/
Banned
Feedback score
17
Posts
229
Reactions
116
Resources
0
hgbf said:
Add me on Discord: hgbf#6395. I'll help you get started.
Click to expand...
okay ill add now[DOUBLEPOST=1582486121][/DOUBLEPOST]
pink said:
this is the structure you follow
<!DOCTYPE html>
<html>

<head>
meta's , stylesheets, links etc
</head>
<body>
content you want to view on the site
</body>
</html>
and since hgbf seems to have free time i guess he can explain everything to you haha.
Click to expand...
ohh okay that looks familiar
 
Last edited:
Banned forever. Reason: Leaking user resources
Status
This thread has been locked.
Top