Positioning elements
I want the vertical center of
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.
28 Replies
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
Not the recommended solution
Also the spacing isn't correct
This breaks if HeroSection Title is multiline:
My guess is the top is coinciding with the center of the parent div
This solved it, thanks.
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
Not your bad?
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
They didn't, just the image had 1 line
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
Anyway the correct solution is just using CSS Grid
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
But YouDontKnowMe was asking for something that is likely for a project and you want to give the correct answer not a quick answer
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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)
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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
Like I mentioned. The center of div of the Hero Section has to coincide with the center of the parent div
So, even if it is multiline, it should work
Sorry if the image didn't make it clear enough
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
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)