Html 我如何在引导程序中水平居中表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38160951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do i horizontally center a table in bootstrap
提问by Amod Gaikwad
This my code. What im trying to do is get this table at the center of the container. But instead it aligns to the left by default when i use the "container" class and it uses the full width when i use the "container-fluid class" for the div. I want to horizontally center the table. Can anyone help?
这是我的代码。我想做的是把这张桌子放在容器的中心。但是，当我使用“容器”类时，默认情况下它会向左对齐，而当我使用“容器流体类”作为 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>
Here is a screen shot Screenshot
这是一个屏幕 截图 Screenshot
I know "container-fluid" uses the full width, but i have also used "container" class only, but it does not help. Please advise...
我知道“容器流体”使用全宽，但我也只使用过“容器”类，但这没有帮助。请指教...
回答by Kat
Using this Bootstrap row/column combination works regardless of the size of your table or screen, no CSS necessary:
无论您的表格或屏幕的大小如何，都可以使用此 Bootstrap 行/列组合，无需 CSS：
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
....table stuff....
</table>
</div>
</div>
回答by cristiancajiaos
To horizontally center the table itself, you can use in a CSS, both the marginand widthproperties.
要使表格本身水平居中，您可以在 CSS 中使用margin和width属性。
.table {
margin: auto;
width: 50% !important;
}
Now, for the content of the table, you can use both a combination of CSS and the Bootstrap typography classes. In this case, CSS for the thelements, and the .text-centerclass in your table.
现在，对于表格的内容，您可以同时使用 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>
Here your can see it for both .container-fluidand .containerclasses:
在这里你可以看到它.container-fluid和.container类：
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}<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>回答by Dulith De Costa
You can center the table as follows with CSS.
您可以使用 将表格居中，如下所示CSS。
.table {
width: 50%;
margin: 0 auto !important;
}
You need to have margin: auto
你需要有 margin: auto
回答by Luiz Gon?alves
Just add a class: text-centerin table class.
只需添加一个类：text-center在表类中。
<table class="table text-center">
...
</table>
It's a native class from Bootstrap that permits horizontal align.
它是 Bootstrap 的一个原生类，允许水平对齐。
回答by Hearner
With css
用css
.table td {
text-align: center;
}
https://jsfiddle.net/8s9918my/
https://jsfiddle.net/8s9918my/
Or bootstrap:
或引导程序：
<table class="table text-center">
回答by Grigory Kislin
<div class="table-responsive">
<table class="mx-auto">
....
</table>
</div>
Take solution from Center bootstrap table with 100% width
回答by Ravi
You can try column classes make it center
您可以尝试列类使其居中
<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>
