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

CSS

Posted by Maties Alzina Soler
Maties Alzina Soler
2,307 Points

How to put a paragraph in the middle of a div?

Hi all,

First of all, I have to say I'm a begginer, and maybe my qüestions are so simple.

I have a paragraph inside a div:

<div class="div">
<p>FOTO</p>
</div>

The div has this CSS settings:

.div {
  width: 400px;
  height: 400px;
  border: #CED8BC 3px solid;
  border-radius: 10px;
}

How can I position that paragraph into the middle of the div? Totally centered I mean. From the top, the bottom, the right and the left.

I tried this, but It doesn't work:

.div p {
  width: 90%;
  margin: auto auto;
}

I have problems with the CSS positioning, sorry '^^.

Thanks!

3 Answers

Michael Jurgensen
Michael Jurgensen
8,341 Points
Michael Jurgensen
Michael Jurgensen
8,341 Points

Hi Maties,

This should be the only css you need:

 div
 {
    position: absolute;
    top: 50%;
    left: 50%;

}

Hope that helps.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi,

One solution would be to try the adding the following to your .div style:

position: relative;

Add the following to your .div p style:

left: 50%;
position: absolute;
top: 50%;

You would then set a width and height for the div p style followed by a negative margin-left and negative margin-top at half the values e.g.

height: 100px;
margin-left: -50px;
margin-right: -50px;
width: 100px;

Adjust the above as required but this should position it absolute center of the div.

Thanks

-Rich

Paul Carter
Paul Carter
12,543 Points
Paul Carter
Paul Carter
12,543 Points

You could try adding equal padding to the p tag to squeeze it into the middle.

Also, make the text center aligned.

''CSS'' if you want specificity '''CSS div.div { padding: 2em 2em; }

div.p { text: center-align; } '''

'' 'div' is not a good class name''. Be more descriptive of the purpose and do not confuse yourself with repetitive selectors. Eg:

+class="alert" (it should be red colour, or look important) +class="message" (normal) +class ="fancy" (image background or colour border) +class="click-me" (marketing)

Honestly, ''you may want to center all (most) of your text if you are doing this'', because a mix looks weird in my oppinion. In this case you want low specificity:

This is what I think of as a ''Tumblr'' look. center text in the middle of the screen. '''CSS body { text-align: center; padding: 2em 2em; } '''

(low specificity because just 'body' is targeted.)