Display absolute

HTML & CSS
1

I was wondering if there was a way to cause an AP element to display as something other than block or none? I figure that if this is possible its an override of some standard setting, but i just dont know how or if it’s even possible.

example:

p{ position: absolute; top: 0; right:0 ; display:table-cell; vertical-align:middle; height:200px;}

<p>sample text</p>

The sample text will fail to display in the middle, because the P element is being displayed as a block and not a table-cell. I think I know a work around, but it requires extra mark up :confused:

2

display: inline;

?

3

Hi, position:absolute overweighs any other display property :). So no, it’s impossible.

4

Thanks, Ryan. I just wanted to confirm that.

5

Glad to help :). If you have questions on what does what with properties (hard to explain) then you can go to w3.org and I’m sure what they say there can back up what I said (or vice versa)

6

The sitepoint reference shows a table of values.

Position the element first and then align the inner element.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    background:red;
    position: absolute;
    top: 0;
    right:0;
    height:200px;
}
span {
    display:table-cell;
    vertical-align:middle;
    height:200px;
}
</style>
</head>
<body>
<p><span>sample text</span></p>
</body>
</html>

(Not ie7 and under)