Ina Code Blog

bunch of code in one place
« Alphabetized listing in Wordpress
Flexible upload of images for Wordpress »


Nov
6

Center page verticaly and horizontaly

Posted by admin in html / css

I have to center almost all web pages horizontaly and it is simply made by adding margin and width parameter to your container div. Then I came accross the problem to align the page also verticaly to the center of a browser. I found some suggestions with 50% width or height of divs, but the problem was that page would hide at the top of the browser window as you resize it. Sometimes it’s good to look a little in the past as I found the solution using tables (for a long time now I use nothing but divs!). Page is verticaly centered if you add the vertical-align parameter to the table tag. Below you can buy cialis online usa find full code for centering your page.

HTML code:

<html>
<head>
  <title>Center page verticaly and horizontaly</title>
</head>
<body>
<table id=”container”>
  <tr>
    <td>Contenet is centered verticaly and horizontaly.</td>
  </tr>
</table>
</body>
</html>

CSS code:

html, body, #container {
  height:100%;
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
  width: 400px;
}

Here is cialis to buy target=”_blank”>example.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

3 Responses to “Center page verticaly and horizontaly”

  1. Added by Ehantelle on Jul at 8

    Nice…

    hello,very cool. http://blogs.hegatrading.com/akfmnmefva/2011/07/07/damas-dresses-in-houston-tx/ ,nice to meet you…

  2. Added by venzingS on Jul at 30

    really good article…

    I have spent a bit of time going through your posts, more than I should have but I must say, http://www.sportbikedating.com/community/blogs/entry/Cosplay-are-usually-rapidly-actuality-a-adopted-botheration-amidst-the-majority-of-the-adolescent-ones-who…

  3. Added by Khantelle on Aug at 20

    Great One…

    I must say, its worth it! My link, http://en.netlog.com/RenoColumbusudg/blog/blogid=4256080,thanks haha…

Leave a Reply

Comment