CODEWITHSUNDEEP
htmlcss
user1006115
user1006115

Reputation: 279

Align text centrally on the bottom of the page

I want to have a text aligned centrally on the bottom of the page.

I have the following code:

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

It works fine in Firefox and Chrome but not in IE.

Upvotes: 4

Views: 60432

Answers (2)

thirtydot
thirtydot

Reputation: 228192

You need to add a doctype as the very first line:

<!DOCTYPE html>
<html>

Without it, IE is using Quirks Mode which emulates IE 5.5 (which doesn't support position: fixed).

Upvotes: 7

Robert
Robert

Reputation: 3074

Might be a copy and paste issue but you need an ending quote in your <p style=... >, that should help. Another option is the set your text-align: center on the actual <div> so your aligning the text inside the div. Both of these worked in IE 9 - what version of IE are you using that it's not working in?

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

OR 

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

Upvotes: 1

Related Questions