Center text vertically within available height - html

Question

I have a block with information, floating left and a button group, floating right.
The information block has 2 rows. The first row holds information on top, but the 2nd line should be vertically centered using the whitespace available (the white space is created by the floating right button group).
How can this be done ?
HTML:
<div class="rowWrapper">
<div class="moduleInfo">
<div class="moduleTitle">Module1</div>
<div class="moduleTime">08-05-2013 11:12:33</div>
</div>
<div class="actions">
<button type="submit">Action1</button>
<button type="submit">Action2</button>
<button type="submit">Action3</button>
<button type="submit">Action4</button>
<button type="submit">Action5</button>
</div>
</div>
CSS:
.rowWrapper {
border: 1px solid #a29791;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 4px 0;
padding: 4px;
overflow: hidden;
}
.moduleInfo {
float: left;
}
.actions {
float: right;
}
.actions button {
display: block;
}
I have a fiddle created for this:
http://jsfiddle.net/DrDelete/bLw79/

Answer 1

If the available size is always the same, you can use line-height:
http://jsfiddle.net/bLw79/2/

Answer 2

if you try center-vertically, it won't work,you can try 2 options
1) line-height:40px;
2)position:absolute; top:50%; height:240px; margin-top:-120px; //margin-top = 1/2 height
i would prefer using the 1st option

Answer 3

Add the following in your CSS:
.moduleTime{
padding-top: 35%;
}
But I suggest you to use table here since it will provide your moduleTitle text more flexibility as you can see by changing the text in your code and then changing the moduleTitle text in the code provided on this Fiddle

Answer 4

Vertical centering is a little tricky one. If there's only one line of text you can always use line height. But, in case you have multiple lines of text or images this technique is not going to work. Instead, change the parent display property to table (display:table). And give the vertical align to center (vertical-align:center) to the child elements. That's it, now child elements will be vertically aligned within parent. And don't forget to give a height for parent.