HTML: I want to position this paragraph text to bottom of my page?

Question

hi,

Currently the text is at the top of my website but i want it bottom;

 <p style="text-align:relative;">this is best day ever!this is best day ever!this is best day ever!<p>

when i edit it and add text-align:bottom it dosent works!!!!

score 16 · Accepted Answer · edited Sep 03 '15 at 13:48

16

Try this code :

  <html>
        <head>
            <title>test</title>
        </head>
        <body>
            <div style="position: relative">
                <p style="position: fixed; bottom: 0; width:100%; text-align: center"> TEXT YOU WANT
                </p>
            </div>
        </body>
    </html>

edited Sep 03 '15 at 13:48

Ankit Chaudhary

4,059
1
11
23

answered Aug 01 '13 at 09:30

Johnson Smith

201
1
2

Vaibhav Jain · Answer 2 · 2013-08-01T09:27:55.907

1

 <p id="Bottom">this is best day ever!this is best day ever!this is best day ever!<p>

and CSS :

#Bottom {
   position : absolute;
   bottom : 0;
}

Demo

edited Aug 01 '13 at 09:27

answered Aug 01 '13 at 09:21

Vaibhav Jain

3,729
3
25
42

score 0 · Answer 3 · answered Aug 01 '13 at 09:19

0

Try this:

style="position:absolute; bottom:0px;"

answered Aug 01 '13 at 09:19

Abhishek Jain

2,597
1
18
12

score 0 · Answer 4 · answered Aug 01 '13 at 09:20

0

Absolutely position the element and set its bottom property to 0.

p{
    position: absolute;
    bottom: 0;
}

Working Example http://jsfiddle.net/zMKbf/

answered Aug 01 '13 at 09:20

Kevin Bowersox

93,289
19
159
189

score 0 · Answer 5 · answered Dec 03 '16 at 11:34

0

p {
    height:200px;
    display: table-cell;
    vertical-align: bottom;
}

This is a better way...

answered Dec 03 '16 at 11:34

Salvio

100
2
15

doesn't work... – IMPixel Jul 24 '23 at 14:33

score 0 · Answer 6 · answered Mar 15 '17 at 09:42

 <html>
        <head>
            <title>test</title>
        </head>
        <body>
            <div style="display: table;">
                <p style="display: table-row;vertical-align: bottom; text-align: center"> TEXT YOU WANT
                </p>
            </div>
        </body>
    </html>

i found it in this question, http://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container/19110204#19110204 in Hashbrown answer

HTML: I want to position this paragraph text to bottom of my page?

6 Answers6