如何使用 Twitter Bootstrap 在 TD 中垂直对齐按钮、文本和输入文本字段

Posted 2023-05-08

【中文标题】如何使用 Twitter Bootstrap 在 TD 中垂直对齐按钮、文本和输入文本字段

【英文标题】：How to vertically align button, text and input text field in TD using Twitter Bootstrap

【发布时间】：2012-11-18 08:29:33

【问题描述】：

<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>

我已经为 TD 尝试了style="vertical-align:middle", valign="middle"，但它不起作用

如下所示：http://ge.tt/1Klf2dS/v/0?c

【参考方案1】：

Twitter 引导程序将为大多数表单元素添加 margin-bottom: 10px，但不会向 <button> 元素添加。如果将 html 元素放置在表格的单行中，这将导致您的 HTML 元素看起来奇怪地对齐。

您可以从元素中删除 margin-bottom，或者将其添加到其他元素。

看看这个例子：

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

【参考方案2】：

由于您询问的是 Twitter Bootstrap，并且您的代码似乎是表单的一部分（请原谅冗余），向表单添加“form-horizo​​ntal”类应该可以解决您的对齐问题：

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

【讨论】：

这对我来说在 Bootstrap 2.3 中的 <div> 上工作得很好，谢谢。

【参考方案3】：

使用这个

 style="Margin-top:-10px;"

【参考方案4】：

这是处理这类标签的诀窍，;)

在标签中添加.checkbox

<label class="col-sm-4 checkbox">Cinsiyet</label>

该课程不会造成任何伤害，只需根据需要添加边距