How can I do this with flexbox? Elements Alignment
I would like to align the Big Title EXCLUSIVE MONCLER SERVICES with the carousel controls. That way, is there an easy way? I guess with flexbox there isn't?
18 Replies
You don’t need flexbox for that, you can wrap the carousel and title in a div and add
text-align: center; to the title.Yes and how do you want me to align the carousel controls?
You don’t have any in there.
But you could most likely add a
margin-inline: auto; to them.What do you mean I dont have any in these?
in there*
Any what?
The controls are to the right.
Oh I’m sorry I couldn’t see them too well, they were white blended in haha, you want those under the text?
Let's stay I want the text title in the center of the screen and the controls to the same height however they are aligned to the right, like in the layout
Do you think is there any easy way to achieve what i want?
you know, i'm genuinely a little stumped on this myself haha, i might have overestimated this one. i don't believe i can get it to work in an efficient way at least, the best i've got so far is this however i'm not sure if the text is centered? Maybe it is? give it a try perhaps.
What if I do display flex and the carousels are flex-end and the title is margin-auto?
Maybe that will work hmm
i'll think about it tomorrow
you don't need to include the carousel in the flex container, only the title and controls, the carousel will automatically render underneath.
Yeah i mean, I don't want it to render under it
It's not in the layout see?
I mean in the figma
Techincally they are both on the same line
i'm honestly confused with what you want, the carousel in your image is underneath the title and controls.
Sorry its late,
I meant
What if I do display flex on the top div, and then the 2 divs thats inside it, are the controls and the title, the title will have margin:auto and the the carousel controls will be flex-end
But yeah the carousel is right
you can't use
flex-end in this way as you're not trying to align along the y axis. Additionally there's no justify-self for flex either. So you'd have to use margin-left: auto; to do the carousel controls.
i'm sorry but what i've done is the most i can do unfortunately, it's probably quite a simple fix but we've both got to hope someone provides an explanation 👍, sorry i couldn't help much here.
@abradoresSure i'll try it out tomorrow
sounds good
i just double checked it again, i'm pretty sure what i said let's you do what you want- https://codepen.io/deerCabin/pen/GRPExwO 👍.
Thanks for the help man
I appreciate it, it works
No worries!