如何使用 Bootstrap 框架使表格居中答案

【问题标题】：How to Center Table Using Bootstrap Framework如何使用 Bootstrap 框架使表格居中
【发布时间】：2021-09-04 00:25:54
【问题描述】：

我正在对我的静态网站进行一些更改，添加一个支付网关，因此我正在添加一个使用 paypal 创建的自定义按钮。问题是表格没有将页面的中心与页面上的其余内容对齐。这是在支持页面中。这是贝宝为按钮生成的部分代码......这是页面的链接 http://www.jvits.co/support.html

   <table>
<tbody><tr><td><input type="hidden" name="on0" value="Get Remote Tech Support">Get Remote Tech Support</td></tr><tr><td><select name="os0">
  <option value="Tech Support 1">Tech Support 1 $60.00 USD</option>
  <option value="Tech Support 2">Tech Support 2 $120.00 USD</option>
  <option value="Tech Support 3">Tech Support 3 $180.00 USD</option>
</select> </td></tr>
</tbody></table>

【问题讨论】：

标签： html bootstrap-4 alignment text-align

【解决方案1】：

您可以使用 Bootstrap 类“mx-auto”使表格居中：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
</head>
<body>
  
<div class="container">

<table class="mx-auto">
<tbody><tr><td><input type="hidden" name="on0" value="Get Remote Tech Support">Get Remote Tech Support</td></tr><tr><td><select name="os0">
  <option value="Tech Support 1">Tech Support 1 $60.00 USD</option>
  <option value="Tech Support 2">Tech Support 2 $120.00 USD</option>
  <option value="Tech Support 3">Tech Support 3 $180.00 USD</option>
</select> </td></tr>
</tbody>
</table>

</div>

</body>
</html>

【讨论】：