Solved

Vertically centered element

Posted on 2006-06-26
6
307 Views
Last Modified: 2013-11-19
I am not sure if this is possible.

How do you position an element, lets say a table, vertically centered on a page?  No scrollbars.
0
Comment
Question by:rodmjay
  • 2
6 Comments
 
LVL 37

Accepted Solution

by:
Harisha M G earned 168 total points
ID: 16988601
Hi,

For the body element, add the "vertical-align" style..

<body style="vertical-align: middle">
...


---
Harish
0
 
LVL 7

Assisted Solution

by:maUru
maUru earned 166 total points
ID: 16988632
0
 
LVL 37

Expert Comment

by:Harisha M G
ID: 16988652
maUru, good point !

rodmjay, refering to the link sent by maUru, the style should be

<body style="display:table-cell; vertical-align: middle">

0
 
LVL 10

Assisted Solution

by:jagadeesh_motamarri
jagadeesh_motamarri earned 166 total points
ID: 16989420
Well.......here is a post that i've answer earlier this month. It was accecpted.....Take a look at this ... http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21888464.html

......................Same thing copied here...............
Hi digitalpacman,

Here is a nice article on what you are looking for. Don;t forget to see the examples which contains your solutions

URL: http://www.badboy.ro/articles/2005-02-20/index.php

I wouldn't mind copying the code for you.

Here it goes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Middle align test - multiple lines</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Lucian Slatineanu, http://www.badboy.ro/" />
<style type="text/css" media="screen">
<!--
p {
     margin:0;
     padding:0;
}
#wrapper {
     width:550px;
     border:1px solid #666;
     padding:10px;
     height:300px;
}
#fixed {
     float:right;
     width:200px;
     height:300px;
     background:#666;
     display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
     display:table;
     position:static;
}
#floating { /*for IE*/
     width:300px;
     height:100%;
     background:#EAEAEA;
     position:relative;
}
#floating div { /*for IE*/
     position:absolute;
     top:50%;
}
#floating>div { /*for Mozilla and Opera*/
     display:table-cell;
     vertical-align:middle;
     position:static;
}
#floating div div {
     position:relative;
     top:-50%;
}
-->
</style>
</head>

<body>
<div id="wrapper">
     <img src="0.gif" alt="stuff" id="fixed" />
     <div id="floating"><div><div>

          <p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
     </div></div></div>
</div>
</body>
</html>


______Jags.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to count occurrences of each item in an array.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question