• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Proper way to center text and button Home Feature #3 Gray

Home › Community Forums › Epik Theme Support › Proper way to center text and button Home Feature #3 Gray

  • This topic has 7 replies, 2 voices, and was last updated 8 years, 4 months ago by kronos.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 12, 2014 at 11:09 am #10622
    Bob_Fortner
    Customer

    I’ve hacked the following together, but have read that the tags I’m using are being discontinued. Is there a better way to code this that is more future proof?

    <p><center>An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.</center></p>

    <p><center>Request Proposal</center></p>

    http://bobfortner.com/

    February 12, 2014 at 11:15 am #10624
    kronos
    Customer

    text-align: center; is what you can use. Here is a link explaining – http://stackoverflow.com/questions/11478067/replacement-for-center

    February 12, 2014 at 11:24 am #10625
    Bob_Fortner
    Customer

    Thanks for the link! I looked it over and I’m not quite sure how to construct this to include the two lines I want to display in the widget.

    The first line of text is: An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.

    Then on the next line is a button: Request Proposal

    Sorry, but it just isn’t clear how to go from what I had with the old HTML to the “text-align: center;” version. Could you help me format the replacement code?

    February 12, 2014 at 11:33 am #10628
    kronos
    Customer

    Can they be in divs? If so, you can add this –

    <div class="center"><p>An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.</p></div>

    Or –

    <p class="center">An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.</p>

    Then add the styling for the “.center” class in your css –

    .center {
        text-align: center;
    }
    February 12, 2014 at 11:38 am #10629
    Bob_Fortner
    Customer

    Thanks Kronos! Really appreciate your help ๐Ÿ™‚

    I can try what you suggested, but I kept fooling with it and came up with this. Let me know if you think this is the best way, or at least an okay way. It seems to work, just want to make sure I’m not opening myself up for some problem I can’t foresee based on how I did this.

    <p style=”text-align:center;”>An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.</p>

    <p style=”text-align:center;”>Request Proposal</p>

    If you think what you suggested is better/safer, please let me know and I’ll switch to that.

    February 12, 2014 at 11:48 am #10632
    kronos
    Customer

    Yes that will work as well. That’s the “inline” way. Some people use css to do it if they plan to use the same code/class on multiple parts of the site and would rather manage all of them together at once, vs going through each inline code and making changes.

    I would add the class and the css myself….you could also add all of the content inside one div and add the text-align: center to it and it would automatically center all of the text without having to add `style-“text-align: center;”‘ ….either way will work, just use whatever your comfortable with.

    February 12, 2014 at 12:01 pm #10633
    Bob_Fortner
    Customer

    I took your advice and added the class to my css. I put it at the bottom of the 02 Defaults section… don’t know if that matters or not.

    Here’s the exact code I used in the widget:

    <div class=”center”><p>An on-site photo shoot, extensive photo editing and delivery of appropriately licensed images included in all proposals.</p>

    <p>Request Proposal</p></div>

    Only used one div as you suggested. Let me know if you see any errors. Can’t tell you how much I appreciate your help!!

    February 13, 2014 at 8:23 am #10659
    kronos
    Customer

    Looks fine to me.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now โ†’

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us โ†’

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 ยท Appfinite ยท Built With The Genesis Framework