Bootstrap，表格，居中按钮答案

【问题标题】：Bootstrap, Table, Centering ButtonBootstrap，表格，居中按钮
【发布时间】：2017-10-05 14:14:16
【问题描述】：

我有一个表格，我想在其中放置一个下拉按钮。我无法将按钮居中，我已经尝试了很多事情。有没有办法做到这一点？

<table class = "table table-hover table-condensed">
<tr>
  <th class = "text-center">
    Test
  </th>
</tr>
<tr>
  <td>
    <div class="col-md-3 text-left">
      <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#" class="small" data-value="Option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option1</a></li>
            <li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option2</a></li>
          </ul>
      </div>
    </div>
  </td>
</tr>
</table>

【问题讨论】：

标签： html twitter-bootstrap html-table

【解决方案1】：

将“文本中心”类放在这个 div 中。这是see的codepen：

<div class="button-group text-center">

还要从包含 div 的类中删除 col-md-3 和 text-left

【讨论】：

非常感谢，Dream_Cap。我看到它向右移动了一点，但它没有居中。如何直接在“测试”文本下方获取它？
轰隆隆，谢谢！

【解决方案2】：

只需删除 col-md-3 text-left 并在按钮的父 div 上添加 text-center 即可。检查下面更新的 sn-p...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="http://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class = "table table-hover table-condensed">
        <tr>
          <th class = "text-center">
            Test
          </th>
        </tr>
        <tr>
          <td>
            <div class="text-center">
              <div class="button-group">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="small" data-value="Option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option1</a></li>
                        <li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option2</a></li>
                    </ul>
            </div>
          </div>
        </td>
       </tr>
     </table>

【讨论】：