• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Float Center, Text Align Left

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Float Center, Text Align Left

This topic is: resolved

Tagged: align, center, float, footer, left, text

  • This topic has 7 replies, 2 voices, and was last updated 8 years, 5 months ago by Porter.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 8, 2014 at 8:38 am #127114
    Porter
    Participant

    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


    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 8, 2014 at 12:57 pm #127142
    Tonya
    Member

    Hi 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 Bootcamp

    October 8, 2014 at 1:16 pm #127146
    Porter
    Participant

    Thanks 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;
    }

    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 8, 2014 at 1:26 pm #127147
    Tonya
    Member

    Hi 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 Bootcamp

    October 8, 2014 at 2:12 pm #127150
    Porter
    Participant

    Ah, 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?


    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 8, 2014 at 2:19 pm #127152
    Porter
    Participant

    I 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.


    Buy me a beer? | Try DigitalOcean VPS Hosting

    October 8, 2014 at 2:24 pm #127154
    Tonya
    Member

    Hey 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 Bootcamp

    October 8, 2014 at 2:50 pm #127155
    Porter
    Participant

    Got 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!


    Buy me a beer? | Try DigitalOcean VPS Hosting

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Float Center, Text Align Left’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble