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

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

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.