Positioning elements

I want the vertical center of

HeroSection Title

HeroSection Title

to coincide with the vertically center of the parent div, and the Button to be vertically centered between the bottom of the HeroSection Title and the bottom of the parent div. This sounds like a simple problem, but I am having a hard time solving this.

YYouDontKnowMe I want the vertical center of `HeroSection Title` to coincide with the verticall...

Zoë•5/8/23, 10:29 AM

https://codepen.io/z-/pen/mdzXQVZ/d59dce6ae77f08b316df5ac0cafdc2e1

CodePenZed Dash

For YouDontKnowMe

...

Zoë•5/8/23, 10:54 AM

Not the recommended solution

Zoë•5/8/23, 10:55 AM

Also the spacing isn't correct

�👑Eliot Spencer💜This is mine: https://codepen.io/Eliot-Spencer/pen/GRYQwrR

YouDontKnowMeOP•5/8/23, 11:02 AM

This breaks if HeroSection Title is multiline:

YouDontKnowMeOP•5/8/23, 11:02 AM

My guess is the top is coinciding with the center of the parent div

ZZoë https://codepen.io/z-/pen/mdzXQVZ/d59dce6ae77f08b316df5ac0cafdc2e1

YouDontKnowMeOP•5/8/23, 11:02 AM

This solved it, thanks.

Zoë•5/8/23, 11:12 AM

Not your bad?

Zoë•5/8/23, 11:12 AM

They didn't, just the image had 1 line

Zoë•5/8/23, 11:13 AM

Anyway the correct solution is just using CSS Grid

Zoë•5/8/23, 11:14 AM

This is according to the image, I just didn't bother to do many unnecessary styles for the effect they wanted. They wanted the spacings

Zoë•5/8/23, 11:16 AM

Yes but your grid looks like this, you used position absolute to push it down making it unusable as a hero. You went in the wrong direction and put in more effort than required

Zoë•5/8/23, 11:19 AM

But YouDontKnowMe was asking for something that is likely for a project and you want to give the correct answer not a quick answer

Zoë•5/8/23, 11:21 AM

Sorry I don't want to sound like I'm coming down on you hard, just that answers should be ~~correct~~ not wrong (I previously said that there was no correct way to do CSS only wrong and not wrong ways)

Zoë•5/8/23, 11:23 AM

There are people who are absolute beginners here who may be unaware that your quick answer isn't meant to be real (and quick examples that aren't real aren't helpful anyway), and it's not helpful to teach people to do things one way when there's a proper way to do things

�👑Eliot Spencer💜C'mon Is it multi line???

YouDontKnowMeOP•5/8/23, 11:23 AM

Like I mentioned. The center of div of the Hero Section has to coincide with the center of the parent div

YouDontKnowMeOP•5/8/23, 11:23 AM

So, even if it is multiline, it should work

YouDontKnowMeOP•5/8/23, 11:23 AM

Sorry if the image didn't make it clear enough

Zoë•5/8/23, 11:27 AM

But you said your code was for something that was "not a real project" which isn't helpful. Help sections are a place for teaching and you really need to understand that when teaching you need to teach the best method, not just a solution that is good enough or works for limited cases

I just don't want someone else to end up with one of your quick answers and get stuck doing something wrong when there is a simple solution that should be used

I recognise that knowing what is wrong and not wrong comes with a lot of experience, I've been at it for a decade now and have a good understanding. I wouldn't have wanted beginner me to be teaching people

Zoë•5/8/23, 11:30 AM

Do help, just don't give bodge answers and things that you know the not wrong way to solve (for instance styling a button that changes when you click on it)