I have a small javascript code. It shows a small window when loading a page with some text. I need the text in the inside of this small window to be displayed in the middle and not along the left.

Here is the code:

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(document).ready(function(){ setTimeout("$('#div1').fadeIn('drop');", 500); setTimeout("$('#div1').fadeOut('drop');", 3000); }); </script> </head> <body> <div id='div1' style="display: none; position:absolute; top:10%; left:30%; background-color: grey; border: 1px solid lightblue; width: 650px; padding: 5px;"> <h2>Information bla-bla-bla</h2> <h2>just do it bla-bla-bla</h2> </div> </body> </html>

    2 answers 2

    Try text-align: center

     <div id='div1' style="text-align: center; display: none; position:absolute; top:10%; left:30%; background-color: grey; border: 1px solid lightblue; width: 650px; padding: 5px;"> <h2>Information bla-bla-bla</h2> <h2>just do it bla-bla-bla</h2> </div> 
       <h2 style="text-align:center">…