Adding site title and having it resize with header

Hey,

I’m trying to add the the site title (as H1) and have it aligned with the logo.
I was able to follow some older posts to add the title and played around with the css to move the elements to the place i want them to be, but I have couple of problems:
1. When I scroll down, the header is being resized (the logo is getting smaller) and I’m not sure how to implement it to the title as well (so it will move to the center and decrease the size of the font).
2. I can’t seem to vertical align my text to the center of the header. vertical-align:middle; is not working.. :(

Here is how I added the text to the header:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= "<h1 class='logo-title'>";
	$sub .= get_bloginfo('name');
	$sub .= "</h1>";
	/*
	$sub .= "<h2 class='logo-title logo-subtitle'>";	
	$sub .= get_bloginfo('description');
	$sub .= "</h2>";
	*/
	return $sub;
}

This is what I did with the css (I set the logo to be above the menu and then I moved the logo to the other side of the screen – I need to do it for rtl and ltr languages):

.logo, .logo a {
overflow: visible;
width: 100%;
}

span.subtext {
top: 0;
right: 0px;
float:left;
}

.logo img{
float:right;
}

#top .logo-title {
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 32px;
color: #000;
position: relative;
left: 7px;
top: 7px;
opacity: 1;
white-space: nowrap;
}

Zohar