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 corey plummer
corey plummer
1,584 Points

Aligning <P> Text inside a <Div> ?

I am trying to mess around with a site idea that I have.

What I am trying to do at the moment, is to figure out how to get the text that is located inside the <p></p> tags. What I am running into is, the text is at the top right corner and I need it to be inside the middle of my div.

I've done some CSS to make the divs as circles.

any help would be greatly appreciated.

Corey

---HTML----

<html>

<head>
        <meta charset="utf-8">
        <title>Beating Heart Collective | Wellness, Creativity, Do Good.Be Good, Insight</title>
        <link rel="Stylesheet" href="css/normalize.css">
        <link rel="Stylesheet" href="css/circles.css">

    </head>

<body>

<div class="Rounded" id="wellness">

<p> Wellness </p>

</div>

<div class="Rounded" id="Create">

<p> Creativity </p>

</div>

<div class="Rounded" id="Insight">

<p> Insight </p>

</div>

<div class="Rounded" id="Good">

<p> Do Good. Be Good </p>

</div>



</body>


</html>

-----CSS-----

.rounded { 
    width: 200px;
    height: 200px;
    border-radius: 50%;
}


#wellness {
    background-color: #afeeee;
}

#create {
    background-color: #259073;
}

#Insight {
    background-color: #ffff66;
}

#good {
    background-color: #ff4040;
}
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Corey,

I added markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Cheers!

3 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Corey,

If I understand your question correctly, you're trying to center the text within the circles?

There are a number of ways to do this, but my favorite tool for this job is CSS - flexible boxes.

Also, the names used for classes and ids are case-sensitive. I almost always see these as lower-case values in production code.

<div class="rounded" id="wellness">
  <p>Wellness</p>
</div>

<div class="rounded" id="create">
  <p>Creativity</p>
</div>

<div class="rounded" id="insight">
  <p>Insight</p>
</div>

<div class="rounded" id="good">
  <p>Do Good. Be Good</p>
</div>

The big change is below, inside the .rounded style rule. Three properties were added.

.rounded {
    /* I'm a flex container */
    display: flex;

    /* center my immediate child elements along the main axis - horizontal by default */
    justify-content: center;

    /* center my immediate child elements along the minor axis - vertical by default */
    align-items: center;
}

.rounded { 
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wellness { background-color: #afeeee; }
#create { background-color: #259073; }
#insight { background-color: #ffff66; }
#good { background-color: #ff4040; }

Hope this helps,

Cheers

Justin Henderson
Justin Henderson
13,739 Points
Justin Henderson
Justin Henderson
13,739 Points

Hello Corey,

I think it may help if I briefly break down what is going on here:

  1. In order for you to target your CSS, you will have to write your title between two div tags and set a class to that tag. Classes serve as identifiers for one more elements within your CSS. Like so: 
     <div class="title">Beating Heart Collective | Wellness, Creativity, Do Good.Be Good,   Insight</div>

You can then call the Div to on your stylesheet using the class name, in this instance "title". It should look something like this: 

.title{
background color:  #259073;
text-align: center;}

Remember that a <div> is considered a segment of your web page. Including the title tags is valid HTML but not necessarily necessary. Hope this helps.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

In addition to what Robert has suggested, this is another good tool if you need compatibility with browsers that don't support flexbox.