Vertical Centering Question

I'm currently trying to make a div tag of mine horizontally centered. The thing that makes this question a little trickier is that I want it relatively centered in a div that is already floating to the left and inline. Basically I have a left and right box, one is going to hold text and the other an image. I want the left one, that holds text, to be relatively centered. I want it to be setup so that when I add one line, two, or three lines of text that it is always in the middle as far as top and bottom spacing. I don't know if this is possible or not, but I figure that is what these forums are for. It is a difficult question to Google search so hopefully someone can help me out.

Here is the code I'm using:
CSS
.container {
width: 980px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
height: 350px;
background-color: #FFF;
background-image: url(images/header-hang-Addvantage.jpg);
background-repeat: no-repeat;
background-position: 2px 90px;
vertical-align: baseline;
box-shadow: 0 0 8px 2px #13324e;
}

.header {
background-image: url(images/header.gif);
height: 91px;
padding-right: 10px;
padding-left: 10px;
margin-left: 2px;
margin-right: 2px;
background-repeat: repeat-x;
}

.header-left {
display: inline;
width: 500px;
height: 180px;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #fff;
line-height: 1.2;
padding-left: 20px;
}

.header-right {
display: inline;
width: 48%;
float: right;
text-align: right;
}

HTML
<div class="container">
<div class="header"></div> <!--header end -->

<div class="header-left">
<p>This is going to be the header even when I add a bunch of text I want this needs more text to test</p>
</div><!-- header-left end -->

<div class="header-right">This is going to be the image</div><!-- header-right end -->

</div><!-- container end -->

Any comments or ideas are highly appreciated. Thank you for your time.

I figured out some help on how to get this aligned, but now I need to figure out how to get another div tag to fit in next to it. I searched on the forums here and found some helpful advice. Granted I edited the code a little to fit the styling, it gave me this code:

CSS
#bio {
display:table;
}

#bio span,#bio q {
display:table-cell;
vertical-align:middle;
width: 500px;
height: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #fff;
line-height: 1.2;
padding-left: 20px;
}

#bio q {
min-width:100%; /* in case text is very short */
}

HTML
<div id="bio">
<span>This is going to be the header even when I add a bunch of text I want this needs more text to test</span>
</div>


Now seeing as if I have the display be table-cell it means I can no longer have it set to inline. So do I just make another <div> tag where I set it to inline and have the current coding nested inside of that?

I figure if I figured out something that works, I'm not going to make all you expert coding do all the work. But I would still appreciate any other ways or easier ways to do this.