CODEWITHSUNDEEP
htmlcss
Jnb
Jnb

Reputation: 89

Center a text at the bottom of a div

I've got a div for my header and a text in that div. Now I have figured out how to put that text at the bottom of the div but I can't seem to put it in the center.

text-align: center; didn't work.

#heading {
 position: relative;
 background: -webkit-linear-gradient(#acbfb9,#cae1da); /* For Safari */
 background: -o-linear-gradient(#acbfb9,#cae1da); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#acbfb9,#cae1da); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#acbfb9,#cae1da);
 height: 150px;
 width: 100%;
}

#title {
 position: absolute;
 bottom: 20px;  
}


<div id="heading">
    <h1 id="title">StrAgility</h1>
</div>

Upvotes: 2

Views: 106

Answers (2)

web-tiki
web-tiki

Reputation: 103810

First, your #title has not width set so it has the width of the text it contains if you use text-align:center; it won't center in the #header.

So you need to set width:100% on #title to and then text-align:center; will work as you expect.

see this FIDDLE

CSS :

 #title {
        position: absolute;
        bottom: 20px;
        width:100%;
        text-align:center;
    }

Upvotes: 1

sr28
sr28

Reputation: 5126

Text-align center doesn't work for you as you'd expect as you haven't set the width of the title div. As such, it's currently sitting in the centre of the div, it's just that the div isn't wider than your text. So to change that add 'width:100%' and then add 'text-align:center'.

Ah, beaten to it.

Upvotes: 1

Related Questions