CSS Floating Div's & Alignment - css

Question

I am trying to create a control which contains two listboxes with add/remove buttons to move items from one list to the other. Typically I would do this using a table, but I am trying to follow css standards and use divs.
I have the listboxes aligned perfectly, but I can't figure out how to set up the buttons between them.
This is my html (updated to show rendered html):
<div id="dealsummary-ladderlist">
<form action="/Reporting/DealSummaryComparison" method="post">
<div id="available">
<div><strong>Available</strong></div>
<div id="available-items">
<select id="ItemsToSelect" multiple="multiple" name="ItemsToSelect" size="30">
<option value="16">Item 1</option>
<option value="17">Item 2</option>
<option value="21">Item 3</option>
<option value="22">Item 4</option>
<option value="23">Item 5</option>
<option value="24">Item 6</option>
<option value="25">Item 7</option>
</select>
</div>
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<div><strong>Selected</strong></div>
<div id="selected-items">
<select id="ItemsToDeselect" multiple="multiple" name="ItemsToDeselect" size="30"></select>
</div>
</div>
<div style="clear:both;"></div>
<br /><br />
<center>
<p>
<input type="submit" value="Generate Report" />
</p>
</center>
</form>
</div>
This is what I have for css:
#add-remove {
/* want to center on page */
float: left;
width: 10%;
}
#add-remove div {
/* want to add even spacing between buttons */
}
#available {
float: left;
width: 45%;
}
#selected {
float: right;
width: 45%;
}
#available #available-items,
#selected #selected-items {
margin: 1em 0 0 0;
}
#available #available-items select,
#selected #selected-items select {
width: 100%;
font-size: 10pt;
}
How would I achieve the centering and even spacing of the arrow buttons using css?

Answer 1

If you know the precise width and height of the <div id="add-remove"> element, you could wrap the whole thing in a relatively-positioned <div> and use absolute positioning with negative margins like so:
<div id="relativeWrapper"> <!-- added this -->
<div id="available">
<!-- ... snip ... -->
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<!-- ... snip ... -->
</div>
<div style="clear:both;"></div>
</div>
<!-- ... etc ... -->
With the CSS:
div#relativeWrapper {
position: relative;
}
div#add-remove {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
margin-left: -40px;
height: 64px;
margin-top: -32px;
}
Setting both top and left to 50% and margin-left to half the value of width and margin-top to half the value of height will horizontally and vertically center an absolutely-positioned element within its relative parent.
Vertical-centering is difficult to achieve; you can use display: inline-block; vertical-align: middle;, but inline-block is not supported by all browsers. Alternatively, using display: table-cell; vertical-align: middle; tends to work.
Incidentally, the <center> element is deprecated. Use <div style="text-align: center;"> or simply <p style="text-align: center;"> instead.