vertical alignment for an element in the middle
Can anyone help me out to center vertically in the middle as i always fail to achieve this.(min-height is given in the requirement)
https://codepen.io/kvandana451/pen/pomWzgK
58 Replies
The easiest way to center something both vertically and horizontally is using flex:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Tried doesnt works in my example
seems to be centered in the linked pen
I tried it in your example, and it works just fine. And like Mannix said, it's working in the linked codepen now
In vscode it isnt
since 3hrs trying this thing feels so dumb
i don't see the min-height on the screenshot
I think you mean min-height?
Vertical alignment only works when there's somewhere for the thing to align to. When you don't set a fixed or minimum height, the containing element (flex parent) will just be the exact same height as the children. Those will then try to align themselves vertically inside the parent, but because the parent is the exact same height as they are, there's nowhere for them to go
yeah min-height sorry 😄
When you get stuck with this stuff, use the inspection tools, or even just put a border / outline on everything so you can see what's going on
yeah its working now!
i dont know why sometimes it doesnt comes for certain designs.i dont know this trick of handling it.
will keep this in mind
Thanks
in the above example
this is the shorthand for writing width and max-width property.
min value will be 80% only then .80x100 =80px
is this thinking approach right?
no, it will set the width to whatever is lower, 80% of the containing block, or 728px. It won't shrink any smaller than that minimum though. Max-width will stop the element growing past the set max width, but doesn't otherwise set or influence width
what approach?
here if we write the shorthand as width:min(80%,768px);min value is 80px write ?because its parent is 100% that is that banner background.80x100so 80px
Thats what lower will be 80% in our example!!
something with
width: min(80%, 728px); in an 100px wide parent will indeed be 80px wide. Something with max-width: 80%; will be up to 80px wide. There is a differenceIn our codepen example has a 100% parent i.e that red background color div element. So min is 80px not 728px!! Something like consider,, here max is 728px!!!This is what you are saying?
no, I'm saying
width: min() and max-width: aren't the same thing
what you're saying is accurate though, those are the values that would be used in that particular examplethen why are we writing shorthands
width isn't shorthand for max-width
Yes..
instead of this we write what is it called then instead of shorthand?
shorthand is a specific term in CSS, for a property that is used to set multiple values simultaneously.
border is a shorthand for border-color border-width and a bunch of others. What you're writing is just a different, shorter way of achieving a similar thingSo this is right ?
yes, in that example that is how that works
ok thanks a ton for your patience in responding .Thank you
glad to help!
Keep up this great work !!
Thanks once again!
the correct term is function min() is a function 🙂
Okay.
how can we save all these post for future reference because the explaination is awesome and after 3 days of inactivity we lose the content
you don't. They'll be hidden from the active posts list in the sidebar, but they'll still be in #Looking up solutions vs figuring it out yourself while learning/creating front-end projects
we don't remove posts ever, unless they're against the rules
posts are also archived on answer overflow: https://www.answeroverflow.com/c/436251713830125568/1019639731660783766, including this one: https://www.answeroverflow.com/m/1249707558055448656
vertical alignment for an element in the middle - Kevin Powell - Co...
Can anyone help me out to center vertically in the middle as i always fail to achieve this.(min-height is given in the requirement)
https://codepen.io/kvandana451/pen/pomWzgK
though it'll take a few hours for the most recent messages to show up there
Ok i got backup of all my posts in Answer Flow.
So shall i assume it will be life long and it wont get vanished??
That's never a safe assumption but it should be around for a bit.
Ok then how will i keep a backup of this post apart from discord for my personal reference for long run.
save it to your hard drive? store it in google drive?
Ok then ..
like I said, this post isn't going anywhere any time soon, and answers overflow seems to be doing fine too, but nothing on the internet is permanent. If you want continued access to something, you have to have multiple copies you yourself control
you youself control meaning?
that you control the files. They are on your hardware, with you the sole person with access to them
oh!
I tried to export the chat to google drive but couldnt instead we need a third party tool for it.Any sugestions?
Then go to the answers overflow site and click file, save as
no such option.
click the three dots top right, go to save and share, then click save page as
or just hit ctrl+s
it gets saved as a file folder which is completely unreadable
it should be a file and a folder, and you should be able to just doubleclick the file and open it
but alternatively, you can print it to a PDF
or otherwise just manually take some notes and save it in a word doc or something
Yea after opening that folder everything is in some machine readable format.
No such options.
Its too lengthy because you guys have explained in a very simplified manner which i appreciate
you open the file, not the folder
ctrl+p, select Microsoft Print to PDF on the right
in the answers overflow thing
Yea I achieved it thanks thanks thanks.
@Jochem Could you please look into this https://discord.com/channels/436251713830125568/1250478936236752988
@Vandana please don't @ people to look at your posts
or ask in other locations in general, new posts will get the attention they get
Ok sorry ill delete this
I said it because its been too long for waiting for the solution that is why.
You can bump the post the question is in by saying something like "I'm still looking for an answer" or something similarly polite.
okay ill try this .What if still the question is being left unanswered .
Not much to be done then. Maybe try refining the question or sharing a clearer example
Not all questions get answered
What if those questions are of high priority then?
We may not get to know who is on a holiday right?Since all have their own pace
Find someone to pay to answer your question, everyone here volunteers their time 🤷
But don't try to find someone to pay through this server or by dm'ing people from this server
👍
I understand.