How to vertically align button, text and input text field in TD using Twitter Bootstrap

Question

<tr>
  <td colspan="3">
        With Selected: 
    <select name="action" id="group_action" class="span2">
      <option value="">--Choose--</option>
      <option value="delete">Delete</option>
      <option value="add_to">Add To</option>
    </select> 
    <select name="group" id="group">
      <option value="">--Choose--</option>
    <?php foreach($groups as $group){ ?>
  <option value="<?php echo $group->id?>"><?php echo $group->name?></option>
  <?php } ?>
  </select> 
    <button name="group_action" class="btn">Submit</button>
  </td>

</tr>

I've tried style="vertical-align:middle", valign="middle" for the TD but it doesn't work

Here's how it looks like: http://ge.tt/1Klf2dS/v/0?c

Answer 1

Twitter bootstrap will add a margin-bottom: 10px to most form elements, but not to the <button> element. This will cause your HTML elements to look oddly aligned if placed in a single row of a table.

You could either remove the margin-bottom from the element, or add it to the other elements.

Take a look at this example:

http://jsbin.com/ezunom/1/edit

Answer 2

Since you're asking about Twitter Bootstrap, and your code seems to form part of a form (forgive the redundancy), adding the "form-horizontal" class to the form should solve your aligning problems:

<form class="form-horizontal">
</form>