I’ve been scouring the web for an answer to this, and my lack of skills and coding is the real issue here. So as a non-programmer, and non-CSS-savvy Rapidweaver user, I wonder if someone can shed light on how I can do this!
How can I properly position a block of text that is left-aligned wtihin itself but is also centered horizontally between the content above it and below it? Put another way, I have a bullet list that I want left-aligned so that the bullets are all vertically lined up together. But I also want the bullet list to be centered horizontally!
Is there a place where I should be entering some CSS code to make it happen? Are there Rapidweaver stacks that I could use to make this happen?
3 separate Paragraph stacks, each with its own formatting? The centre one could be in a Container. If I read what you’re after correctly, that should do it.
I’m not an expert, but top & bottom centred text stacks for the main paras, middle stack probably in a centred container for the left-aligned bullets. I’ve not come across a single stack that does what you’re after, and I’m sure someone smarter than me could do it with CSS.
I have both Foundry and Foundation, so there are Paragraph stacks. Bit more control than the standard Text stack, but I don’t think they’ll do what you want in a single leap. Again, I’m not an expert, so someone may jump in with a more elegant way!
Definitely trickier. You certainly won’t have the fine control over positioning or size, without playing around with various column/grid configurations. Even then, you may want to try out the free Source framework stacks - they’re very good too - https://shakingthehabitual.com/stacks/source/
I love Foundry and Foundation. Haven’t settled on one or the other just yet. Foundation 6 is out next week, and looks like a game-changer, but I gather Foundry isn’t sitting still either!
Try using a text stack (left-aligned) in a centered UsefulStack. Give the UsefulStack a max-width value that results in about what you want. The key is setting a max width that looks and works well. May not work for you but I find it very useful. Note that max-size is just that: MAX size. If content does not fill the stack then it will only be as wide as needed for the content. But you can also set a minimum size.
For example, if you have a 1200px page you can set a centered UsefulStack of max-width 600px. This will give you 300px margins on both size and you can style any way you wish within that 600px centered stack. Then you can tweak the width for best results.
UsefulStack is one of those stacks that “you don’t know why you need it” but after you use it a while you find that it is really a neat little tool that really helps in your responsive design.
Since the width can be set as a “maximum” it really helps in designing for different screen sizes. ie: you can set it for a width of a small screen and while the rest of of page does it’s thing at different screen sizes you know that the UsefulStack will render the same (max) size in all cases.
Thank you all for the suggestions! This will work.
If anyone out there has a way to ensure that the center, bullet-list remains actually in the center, I’m all ears. If I’m not mistaken, all the options shared so far would be rough estimations to achieve something close to center… because as the users adjusts the width of their browser, the floating item in the middle wouldn’t necessarily stay perfectly centered (am I right in that assumption?).
I’d be curious to know if there’s a way to keep that bullet list completely centered! …and if there’s a stack, or a snippet of CSS code that would lock it in.
If you have bullets of unequeal length, where do you consider it to be perfectly centered?
First Bullet
Longer second bullet
Much longer third bullet that extends further past the first two.
Fourth bullet
In any case, I think Joe and Greg both have workable options. If you set your text stack’s Fill Mode to be Flexible width (of, say 50%) and set it to centered, that would work, I’d think.
In that scenario, then I guess you’d want a two-column setup, with the left column blank and the right column containing your bullets, and having them left aligned. Then no margin or padding or gutter on the columns
Ah, I’m sorry, I’m wrong… When the bullets are the center point, it doesn’t look right. What looks right in context, now that you’ve forced me to actually think about it all the way :), is centering the block so that the longest item is perfect centered overall. (your 3rd option)
Is there a consistent way to achieve that without having to futz with custom settings in each scenario?
(I have to do this about 48 times on 48 different pages within a site)
I’m not at my RW computer to give screenshots, but what I would do is take a text stack and create the settings for that (i.e. Set fill mode to flexible, and decide what width looks best for your layout, set your padding, etc if applicable).
Then I would create a partial for that and ‘unpin’ the contents. Then for each of your 48 instances, just add the partial and change to the new text. Then if you want to change something about the layout (e.x. change the width from 50% to 40% or something), it’ll change on all of the instances but leave the text alone.
(Edit: in case you don’t know about ‘pinning’ in partials, it starts at about the 10 minute mark in this video: https://vimeo.com/136154079)
Thanks - that’s a really great idea. I’m still curious if there’s a snippet of CSS code that would center this the way I’m curious about automatically… but this seems like a decent alternative.
That bullet list in the middle, treated as a single block of content. Centered. Theoretically if the width of the webpage was shrunk, the text could wrap and remain centered.
Each of the few dozen pages I need to format/create has a single bullet list like above. Nothing else on each page should be treated this specific way.
I could use any kind of stack, and would be willing to purchase one if needed. Also curious if there’s CSS that will do this in one fell swoop without having to do any manual sizing.
