Question

这是我的代码。我想要做的是将此表放在容器的中心。但是当我使用＆＃34;容器＆＃34;时它默认与左对齐。当我使用＆＃34;容器流体类＆＃34;时，它使用全宽度对于div。我想把桌子水平居中。有人可以帮忙吗？

<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped">
<thead><tr>
<th>Material Name</th>
<th>Rate (INR)</th>
</tr>
</thead>
<tbody style="">
<tr>
<td>Books</td>
<td>7.00(per KG)</td>

</tr>
<tr>
<td>Soft Plastic</td>
<td>15.00(per KG)</td>

</tr>
<tr>
<td>Hard Plastic</td>
<td>2.00(per KG)</td>

</tr>
</tbody>
</table>
<div>

这是一个截屏 Screenshot

我知道＆＃34;容器流体＆＃34;使用全宽，但我也使用＆＃34; container＆＃34;仅限课程，但它没有帮助。请指教......

Answer 1

要使表格本身水平居中，您可以在CSS中使用margin和width属性。

.table {
   margin: auto;
   width: 50% !important; 
}

现在，对于表的内容，您可以同时使用CSS和Bootstrap排版类的组合。在这种情况下，th元素的CSS和表中的.text-center类。

table th {
   text-align: center; 
}

<table class="table table-bordered table-striped text-center">
    <!-- Content of the table -->
</table>

您可以在.container-fluid和.container类中看到它：

＆＃13;

table th {
   text-align: center; 
}

.table {
   margin: auto;
   width: 50% !important; 
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- container-fluid -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>
  
<!-- container -->
<div id="pricing" class="container">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>

＆＃13;

Answer 2

您可以使用CSS将表格置于中心位置。

.table {
    width: 50%;
    margin: 0 auto !important;
}

您需要margin: auto

Answer 3

用css

bool is_set = false;
std::unique_ptr<Delay> ptr;
void run_ptr() {
    if (!is_set) {
        ptr = x.get();
        is_set = true;
    }
    ptr->out();
}

https://jsfiddle.net/8s9918my/

或引导：

.table td {
   text-align: center;   
}

Answer 4

只需在表类中添加一个类：text-center。

<table class="table text-center"> 
... 
</table>

它是Bootstrap的本机类，允许水平对齐。

Answer 5

您可以尝试列类使其成为中心

<div class="row col-md-4 col-md-push-4"><!-- you can use column classes md-3,md-5 as per your table width -->
<table class="yourtableclasses">
<!-- table content -->
</table>
</div>

Answer 6

无论表格或屏幕的大小如何，使用此Bootstrap行/列组合均有效，无需CSS：

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>

Answer 7

<div class="table-responsive">
    <table class="mx-auto">
      ....
    </table>
</div>

从Center bootstrap table with 100% width处获取解决方案

我如何在引导程序中水平居中一个表

7 个答案: