Javascript to put centered text at the bottom of the page

Question

I am trying to use javascript to insert some center justified text at the bottom of the screen.

So far I have

    var toInsert = document.createElement("div");
    toInsert.innerHTML = "text to insert";
    toInsert.style.position = "absolute";     
    toInsert.style.bottom = "0px";

this puts it at the bottom of the screen how I would like, but then when I try to use this

    toInsert.style.textAlign="center";

the center alignment seems to be overridden by the "absolute" property above, and the text is left justified.

How can I both put text at the bottom of the screen, and have it centered? thanks.

ps. javascript not jquery, for use in a UIWebView on an iOS device.

score 1 · Accepted Answer · answered Nov 17 '14 at 20:38

Make sure your div is 100% width.

toInsert.style.width = "100%";

var toInsert = document.createElement("div");
toInsert.innerHTML = "text to insert";
toInsert.style.position = "absolute";
toInsert.style.bottom = "0px";
toInsert.style.textAlign = "center";
toInsert.style.width = "100%";
document.body.appendChild(toInsert);

score 0 · Answer 2 · answered Nov 17 '14 at 20:29

0

IMO it would be easier to get the element positioned correctly in CSS with a class identifier, then use javascript to add the class.

Since you're using absolute positioning, the CSS you're looking for might be:

left:50%;

answered Nov 17 '14 at 20:29

EricBellDesigns

955
1
9
33

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

I did a quick search on StackOverFlow and this was the first one that came up, I think your answer is already out there.

Best way to center a DIV

here is my Dabblet.com example

edited May 23 '17 at 12:05

Community

1
1

answered Nov 17 '14 at 20:37

Brian H

246
1
12

Javascript to put centered text at the bottom of the page

3 Answers3