Помощ с подравняване на текс

[gena]

Здравейте,

Имам следната страница :

<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
height: 120px;
margin:0 0 0px 0px;
padding:0px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div >

CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is s
</body>

</html>

Където искам "CSS is fun" да бъде позиционирано в средата по вертикала, не само по хоризонтала.

Някой има ли някакви идей?

 

[jooorooo]

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

 

[shterev]

тук е малко сложничко, т.е. заради различията на браузърите.

Модзила: на външния си див сложи -
.out { display:table; vertical-align:middle; height:100px; width:100px;}
.inner { display:table-cell; vertical-align:middle;}

IE6

* html .out {position:relative;}
* html .inner { position:relative; top:-50%;}
*html .center {position:absolute; top:50%; height:1px; }


html:
<div class="out">
<div clss="center">
<div class="inner">centrirano</div>
</div>
</div>


п.с. трябва да имаш височина и ширина на out

 

[gena]

Благодаря ви за отговорите, но като ги гледам те са свързани с позициониране на отделни блокове с абсолютни размери.
А пък и това с различията м/у IE и Firefox винаги много са ме дразнели и ще е много добре ако има начин да се заобиколят.

А ето това е търсения резултат :

<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<head>
<style type="text/css">

.menu2 a 
{
margin: 1px 0px; 	
width: 100%; 	
height: 45px;	
float: none;	
display: block;	
text-align: center;	
vertical-align:middle;
text-decoration: none;	
color: #00f; 
background: #ff0;	
border: 1px solid black;
}


.menu2 a:hover 
{
background: #ee1;	
border: 1px solid black;
text-decoration: none;
color: black;
}

.menu2 a:active {
background: blue;
border: 1px solid black; 
color: #fff;
}
</style>

  <title></title>
</head>
<body >

			<table class="menu2" border="0" width="200px" cellspacing="2" cellpadding="0" >
				<tr>
					<td>
						<a href="nas_right1.html" target="right"><i>За фирмата и фирмени празници</a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="nas_right2.html" target="right" ><i>Организационна структура </a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="nas_right3.html" target="right"><i>приоритети за 2008г</a>
					</td>
				</tr>
			</table>



</body>

</html>

Бих желал текста в тези бутони да се центрира вертикално.

 

[shterev]

Ти занеш ли какво искаш? ДАвашедин код, сега друг ? Я се уточни!

 

[gena]

Ти занеш ли какво искаш? ДАвашедин код, сега друг ? Я се уточни!

За да не натоварвам излишно нещата давайки целият ми код, разглеждайки нета намерих подобен който изглежда по-елементарно и притежаваше същият проблем и затова постнах него.
А и смятах че решението ще е нещо много по просто, а се оказа че това което искам няма да стане така какво го искам..

Що годе намерих решение с поставянето на line-height: ??px само за едноредовите бутони, но това не е универсалното решение което търсих, понеже утре ще се каже че добавяме 3-редов бутон и нещата пак се оплескват...

 

[shterev]

я дай да го видим тоя сайт