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 CSS Layout Basics Positioning Page Content How Absolute Positioning Works

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Absolute Postioning

I would like some text to be centered in the bottom of the screen.

I tried this---- html-

<div id="my-div">I want to be centered</div>

css-

my-div {

   position: absolute;
   bottom: 15px;
   text-align: center;

} , but it doesn't work. It looks like absolute positioning conflicts with the alignment.

How could I achieve this simple task ?

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

You're right, positioning collapses the container, which defeats alignment. But you can position both dimensions:

#my-div {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

Alternately, you can force the width to span the window so the alignment will work again:

#my-div {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}
Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

I have a doubt how "text-align start to work after setting the width to 100%?". What you said is "when i set the "position: absolute" to "my-div" , its width collapses to its to its contents only. But I am saying , why not that small "my-div" box get centered . Why does it remain in the left corner. Why positioning override the text-align? Why not text-align work after collapsing of width of div?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The text-align setting will center the text within the div (not the box itself), but that only works when the div is wider than the text. The position does not override the text-align, but when the width is the size of the contents there is no space for it to move. Expanding the box allows the text-align to work.

The small box gets centered by the offset shown in my first example.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

I got the second case completely, and so I didn't bother about the first solution. But I want to understand that too. What going on in the first case, specially "purpose of left:50% and transform: translateX(50%)"? Thanks

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The "left" setting causes the div to start in the center, and the "translate" shifts it back halfway to put the middle of it in the center.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

My html is----

 <header>
            <div class="container">
                <h1 id="tag-line">Innovation Cloud</h1>
                <h3 id="title">Connect Your Ideas Globally</h3>
                <a href="#" class="btn">Learn More</a>
            </div>
  </header>

And my CSS is----

*,html{
    margin: 0;
    padding: 0;
}

body{
    font-family:'Roboto',sans-serif;
}


/*--------Header-------*/


header{
    background-image:url(http://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
    height: 800px;
    background-size: cover;
    text-align: center;
    color: #ffffff;
    position: relative;
    width: 100%;

}


header .container{
    position: absolute;
    top:15%;
    width: 100%;

}

#tag-line{
    text-transform: uppercase;
    font-size: 6.5em;
}

I am using the Mobile First Approach , at the lowest width of viewport , my heading(#tagline) i,e Innovation Cloud goes out of the viewport width which result in horizontal scrollbar. But as I am increasing the size of the viewport , scrollbar get disappeared. What going on here? I am stuck here. Please help. Thank You.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It's normal for the scrollbar to go away once the viewport is wide enough to display everything.

But this is a different issue. If you need more help, please start a new question.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

In the first instance you need to start the selector with a # so CSS recognises that you're looking to target the ID attribute of the div.

#my-div {
}

Next give your div a width and a height and a background colour so you can then gauge that the text is correctly centered within the content area. :-)