Community Forums › Forums › Archived Forums › Design Tips and Tricks › Float Center, Text Align Left
- This topic has 7 replies, 2 voices, and was last updated 10 years, 1 month ago by Porter.
-
AuthorPosts
-
October 8, 2014 at 8:38 am #127114PorterParticipant
I'm not entirely sure I even want my footer to look like this, but I want to try it to see how it looks. I'm trying to set the each widget area to be centered on the page (there's 4 at 300px, 1200px total width), but I want the text to all align-left. What I have now:
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 300px; float: center; margin: 0 auto; text-align: left; }
That was my attempt to get it working, but I had no luck. I've since switched it back to just be 300px width, and float: left. Any ideas how to accomplish this?
anightinburlington.com
October 8, 2014 at 12:57 pm #127142TonyaMemberHi Porter,
There is no "float: center". Rather, you want to use margin to center with no float, as such:
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 300px; /* Change the width to what you want whether fixed pixels or percent */ float: none; margin: 0 auto 20px; /* set however much bottom margin that you want */ }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampOctober 8, 2014 at 1:16 pm #127146PorterParticipantThanks for the info, I spaced on float: center haha. I've updated my code, and I'm still having no luck, widgets are just stacked vertically.
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 300px; float: none; margin: 0px auto 10px; text-align: left; }
October 8, 2014 at 1:26 pm #127147TonyaMemberHi Porter,
Correct, it centers each widget on the page. I guess I misunderstood what you are trying to achieve when you said "each widget area to be centered on the page."
What area are you wanting to center on the page?
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampOctober 8, 2014 at 2:12 pm #127150PorterParticipantAh, my bad, let me clear it up. In thinking about it, I realize my attempt was completely off, but I'll explain my goal anyway.
I basically want the .widget-title text to be centered, and to have the links below (contained in the respective widgets) to align with the widget title text. It's essentially a text-align left for everything, but centered within the widget, rather than all the way to the left of the widget area (the 300px), as it would be with just text-align: left. Does that make sense?
October 8, 2014 at 2:19 pm #127152PorterParticipantI just realized a possible solution, though someone may come up with a better one.
Rather than have each widget area be 300px to fill the 1200px area (3 x 4 widget areas), I could instead make them smaller, and add the desired padding to position them where needed, and then align left. This way, the widget areas are "centered", and the ext is aligned left.
October 8, 2014 at 2:24 pm #127154TonyaMemberHey Porter,
What you are going to find when trying to center the .widget within .footer-widget-1, for example, is .widget has the same width as its parent. Therefore, you need to either define it's width and then use margin: 0 auto to center it ... or ... just add padding as you said to contain the elements within the parent.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampOctober 8, 2014 at 2:50 pm #127155PorterParticipantGot it, for the most part. As I assumed, it didn't look as great as I thought it would, but at least I was able to best the CSS and make it do what I wanted. I've got an idea on how I want to approach it now, so I'll try that next. Thanks for your help in figuring that out!
-
AuthorPosts
- The topic ‘Float Center, Text Align Left’ is closed to new replies.