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.