Working from a responsive HTML5 template where I made some mods, but I can’t figure this out.
There are three columns that align under three huge font-awesome icons. The icons are aigned across the width of the page nicely, but the text columns below (containing lists) do not. I want the lists to have left justified content (which is working), but each column to be aligned with the center of the icons.
It’s not working for me. Any help/thoughts are most appreciated.
Actually, it looks to me (by applying outline rules) that the columns do (almost - the markers are “outside” instead of “inside”) align with the center of the icons
The issue is that some of the list items do not have enough content in them and so the alignment is not apparent.
Interesting insight. It looks like the 2nd and 3rd column needs some type of left padding. Is there a way to do that w/o increasing the gap between the > and the bullet text?
Normally, a UL has a default padding left of 2.5em. You have zero padding and a decimal number of left margin. Same diff, I guess. Add more to increase the space to the left of the UL. It will not increase the space between the marker and the text. Changing the LI padding-left does that.
I’m interested in solution(s). I’m more a developer that a designer. The only thing I can think of that might work is to add a container (ugh, reluctant to add tag bloat) for the lists, where the list might have width auto and the container elements retain the the centering
