CSS + a + vertical align

[LordGarfield]

hi,

I'm trying to create some squares with text in it. the text should be aligned in the center of the square.
the squares are links to difrent pages.

this is my CSS for one of the squares.

a.vz
{
position:absolute;
top:50%;
left:50%;
margin-left: 230px;
margin-top: 22;
BORDER-TOP: 1px solid #000000;
BORDER-BOTTOM: 1px solid #000000;
BORDER-LEFT: 1px solid #000000;
BORDER-RIGHT: 1px solid #000000;
background: #004990;
text-align: center;
color: #FFFFFF;
font-weight: bold;
width:150;
height:150;
vertical-align: middle;
text-decoration: none;
}


the problem here is that the text is aligned at the top. not in the center. the horizontal align works fine but vertical it doesn't. Has anybody an idee howcome?

best regards
roel.

tank you,

(>" "<)
(='o'=)
-(,,)-(,,)-----
|LORD_GARFIELD|
---------------

 

[PaulBricker]

Try adding
Padding:50% 50% 50% 50%;

In my quick test of your css, it seemed to work.

Paul

 

[PaulBricker]

sorry, hit the button to send instead of Edit. you can try

Padding:50% 0% 50% 0%;

That may look more attractive.

Paul

 

[manarth]

a.vz {display: block} ?

 

[LordGarfield]

well I also did it with the padding.

I never saw display: block before. I check it out.

tanks all

tank you,

(>" "<)
(='o'=)
-(,,)-(,,)-----
|LORD_GARFIELD|
---------------

 

[PaulBricker]

Here are a couple things you can look at.

http://www.westciv.com/style_master/academy/css_tutorial/properties/element_type.html#display

The above is a description of the display element and the below

http://www.westciv.com/style_master/academy/browser_support/element_type.html

is a list of elements that are supported by different browers. Apparently the display element is only partially supported by most of them.

Paul