Question

I want to put a radio button (or any other element) on the left of my tables, but have the button be vertically centered. If I new that the tables were all going to be the same size I could use relative positioning. However, I do not know this. This jsfiddle is close to what I need, however, the left div needs be be of the same height (for vertical alignment) and it also needs to reside in the margin. This jsfiddle is closer to what I am looking for, but seems a little hacky and doesn’t allow for tables of different heights. Can I accomplish this using HTML/CSS without javascript?

Here’s the HTML I’m looking at using to accomplish this:

<div class="item">
    <div class="one"><input type="radio" name="group"/></div>
    <div class="two">
    <table>
        <tr><td>Data</td><td>More Data</td></tr>
        <tr><td>another</td><td>row</td></tr>
        <tr><td>of ...</td><td>you guessed it</td></tr>
        <tr><td>just</td><td>more data</td></tr>
    </table>
    </div>
</div>

and CSS:

table {border-collapse:collapse;width:100%;}
td {border:1px solid black;padding:10px;}
.item {margin:10px; padding:10px; background:red;}
.two {background:blue;}

/* customization */
.one {background:yellow;text-align:center;width:20px;display:table-cell;vertical-align:middle;}
.two {margin-left:20px;}

/* hacky */
.one {height:50px;position:relative;top:55px;}
.two {margin-top:-50px;}

Answer 1

Vertical align only works inside table cells or between inline elements. So either use a table with one row and two cells, for .one and .two or use CSS to convert the div’s into table cells:

.one, .two {display:table-cell;}

Demo (Only tested in firefox, don’t have other browsers installed, hope it works)