I’m having the problem I always have when I try to centre content vertically in a container. I don’t know where to put the ‘uk-flex-middle’ class to make it work. I have a ‘background’ set to large height, in that a container with a header and some text etc.
I’ve put the class on the container but it still sits at the top of the BG instead of in the middle (vertically). If I try the ‘flex’ stack it put everything horizontally centred too so that’s no good.
I never seem to be able to get this right, even if I copy it from other working stacks! Where am I going wrong?
Here’s a little grab showing the stacks. I just want the text to range right in the container and sit in the middle. That’s not much to ask is it??
If I understand you correctly, the flex class will vert align content in the middle (vertically) of the container it’s in, to have a visial effect the container has to be bigger than the content. The the instance you describe the content area is the same height as the content, so technically it is vertically aligning it, inside a container that’s the same dept as the content!
But ya, the solution is the position stack, which will position the content as per the outer container (Section) size.
Flex classes go in the parent container, in your case the Background stack. I like to use the Utility stack a lot, so it will be a child of the Background stack like this:
Looks like you put what I believe is the UIKIT class into the wrong stacks box. It should go into the Class box above it.
I don’t use UIKIT, but normally you enable Flexbox (which maybe already enabled), define the direction i.e. row or column (which again may already be set to column) and then justify the content to be centred using what I suspect is the UIKIT class you used - uk-flex-middle.
Yeah, I tried putting it in the background class, but then all the content went to the horizontal centre too, instead of staying right ranged. When I tried your setup above, the uk-container stopped the background from being full width, so I took that out but even so, all my headers still went over to the left instead of floating right. If I put a float-right in there then the go right, but don’t stay in the middle again.
