Streaming live at 10am (PST)

Using Flexbox to center text to the center of a slide causing other slides to not display


#1

Hi,

I am trying to center some text into a slide in a slider using flexbox.

But when I do that other slides are not shown.

How can I solve this?

Centering using margins is not looking very good.


Here is my public share link: LINK
(how to access public share link)


#2

Hey @Jonah_Kamalakar,

Rather than setting the slide to have flex, create a div inside the slide with a setting of “position: absolute” make it fill the slide “100% width and height” then set this same div to have Flexbox, then place your text inside.

That should do it! Hope it makes sense,
Aaron


#3

First, in general dont add layout style to the core slider wrapper (You will break the layout) - this is not a bug this is the idea in any Slider plugin out there (The core styles are important for things to work).

Center horizontally text/image

its very easy. You can use text-align: center; - simple without extra styles. Example.

Center Verticaly

This is more tricky but with flexbox is very easy (Add the flex to extra wrapper inside slideX not to the core elements wrapper).

Or by absolute (see the answer above)

Related links:




#4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.