Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by ricky partridge
ricky partridge
Courses Plus Student 820 Points

centering text in workspaces

Hi Treehouse residents :) I'm on the Workspaces intro and I've successfully changed Joy's text but can't align it in the center. When I've tried typing in "{text-align: center; color: green}" instead of changing the preview I've added the instruction, "{text-align: center; color: green}" to in front of the title. Any advice is appreciated :)

7 Answers

ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points 
 <head>

 <title>Argh</title>
 <meta charset="utf-8">

<style>
   h1 {text-align: center; color: green}
   h2 {text-align: center; color: pink}
</style>

</head>

<body>
  <h1>Silence Claims The Day </h1>
  <h2>By Ricky Michael </h2>
<p></p>
<p></p>

<p></p>
<p> Long has been the day </p>
<p> Silent your demeanour </p>
<p> There's nothing more to say </p>
<p> To make the air between us clearer </p>

<p> Calm, some say is your name </p>
<p> But me I know you better </p>
<p> I know it burns you up inside </p>
<p> Yet still you suppress your anger </p>  

<p> I wonder who would ever claim </p>
<p> To love you more than I ever </p>
<p> If I could sing aloud your name </p>
<p> I'd hold the notes forever tender </p>  

<p> Now that silence has claimed the day </p>
<p> It feels like you and I are over </p>
<p> Yet blessed I feel I must say </p>
<p> To claim I ever knew you </p>

</body>
</html>


</body>
</html>```
ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points

I'm afraid I don't understand your question, I'm still on the first course and the above is my first attempt with Code. It's the Intro to Workspaces project if that is any help... : /

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, I just looked at it a bit. Is it a h1 element you're trying to center or a paragrah or what kind of element are we centering here? :)

ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points

Hi Jennifer, thanks for taking the time to reply to me :) The title is "Silence Claims The Day" which I used to replace Joy's title, and where Joy's name was I replaced it with my name. I then highlighted her story and replaced it with a poem I wrote. Her story was aligned to the left and as my writing is a poem I thought it would look better center aligned but, despite spending 20minutes on it, I can't see how I center it. I'm sure it's a "doh" moment, but I guess they'll be many of these as I learn to Code :)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You will, I promise. But let's see if we can get this figured out first. Down at the bottom of this page is a link to a markdown cheatsheet to show you how you post code on this forum. This will be invaluable in the future! Can you post your code to me and we can look at how we might center it? :)

ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points

like that ??? :)

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Exactly! Now... for the final piece. You want everything in the body centered... so take a look at the code snippet here and make yours match this.

<style>
   h1 {text-align: center; color: green}
   h2 {text-align: center; color: pink}
   body {text-align: center;}
</style>

Here we select everything in the body and center align it... and... voilá!

I should probably mention here that because your h1 and h2 element are also inside the body you could remove the text-align properties on those and just leave the colors making your code less repetitive.

ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points

Done it!!! You're my hero Jennifer }:)~

...I also learned how to spell voila! (but without the tick on top of the 'a' oops!)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Keep going on the path you're on, and all of this will become second nature. Hang in there! I can definitely recommend doing the Front End Development track here: https://teamtreehouse.com/tracks/front-end-web-development

ricky partridge
PLUS
ricky partridge
Courses Plus Student 820 Points
ricky partridge
ricky partridge
Courses Plus Student 820 Points

Brilliant, thanks Jennifer :) I'm looking forward to that course. I'm still on 'Digital Literacy' at the moment (the first course) but I'm hoping to be starting Front End (the 3rd course) by the end of the week. Quite a good feeling when you get it right, eh ;)