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!

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

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

centering text?

have a look at my code pen below:

http://codepen.io/tbeckett24/pen/wBgKYb

How would you center the text inside this div

4 Answers

Welby Obeng
Welby Obeng
20,340 Points
Welby Obeng
Welby Obeng
20,340 Points 
div {
    width: 300px;
    height:300px;
  background: red;
text-align: center;
  display: table-cell;
  vertical-align: middle;
}
Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Troy,

You could use text-align: center inside your div rule. This will center all inline content within the div.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

thanks for your comment I meant centering text vertically and horizontally so its completely centered in the div

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I think it's going to depend on what you're trying to vertically center. If it's only going to be a single line of text as shown in the demo. Then you could set the line-height to 300px and that would vertically center one line of text. In that case, you would not need to set the height of the div to 300px. This will not work though if the text wraps to 2 lines.

line-height: 300px;

Here's an article I found which covers a few different methods you could use for vertically centering for various situations: http://www.vanseodesign.com/css/vertical-centering/

Welby Obeng
Welby Obeng
20,340 Points
Welby Obeng
Welby Obeng
20,340 Points 
div {
    width: 300px;
    height:300px;
  background: red;
text-align: center;
  display: table-cell;
  vertical-align: middle;
}
Sean T. Unwin
Sean T. Unwin
28,686 Points
Sean T. Unwin
Sean T. Unwin
28,686 Points

Welby Obeng, you should post that comment as an answer as that works nicely, as well.

Sean T. Unwin
Sean T. Unwin
28,686 Points
Sean T. Unwin
Sean T. Unwin
28,686 Points

To center vertically:

div a {
  position: relative; /* This is important */
/* Since anchor tags are inline we need to change the display
 * to either inline-block or table in order for transforms to work
 *    - something that doesn't make it inline or table-cell
 *    - also note that 'block' will stretch the width to 100% of parent
 *      so that's not optimal either
 */
  display: inline-block;
  top: 50%;
  /* Notice the negative number */
  transform: translateY(-50%);
}

If you're just trying to center text then leaving text-align: center on the parent element is fine.

However, if the content is not only text then we can use the same technique as above, by using X axis instead of Y.

In this case, the CSS would like: (Be sure to remove text-align: center` from the parent)

div a {
  position: relative;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)  translateX(-50%);
}

Example: Codepen

Alternatively, you can use Flex.

Note: I won't go into detail on using Flex, nor will I be adding browser prefixing.

div {
  width: 300px;
  height:300px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;

}
div a {
  flex: 0 0 0%;
  align-self: center;
}

Example: Codepen