文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在引导表中居中文本？

问如何在引导表中居中文本？
EN

Stack Overflow用户

提问于 2022-05-09 20:39:52

回答 4查看 90关注 0票数 -1

在本表中，如何对齐中间的文本？text-center不起作用。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td>name</td>
      <td>supplier </td>
      <td><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

bootstrap-5

html

css

回答 4

Stack Overflow用户

发布于 2022-05-09 20:56:15

您必须将Bootstrap类：text-center应用于每一个td，而不是表！另外，您可以考虑使用td { text-align: center; }创建一个定制的css，它将更短、更容易，然后将bvootstrap类应用到每个td中。

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td class="text-center">name</td>
      <td class="text-center">supplier </td>
      <td class="text-center"><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

票数 0

Stack Overflow用户

发布于 2022-05-09 20:58:03

您可以使用类名文本中心。

<div class="text-center">
  I am centered
</div>

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
    <div class="container text-center">           
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
    </body>

或者在CSS中，将它放在父容器中。

display: flex;
align-items: center;

票数 0

Stack Overflow用户

发布于 2022-05-10 07:02:36

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
    <tbody align="center">
        <tr>
            <td>name</td>
            <td>supplier </td>
            <td><button>Delete</button> </td>
        </tr>
    </tbody>
</table>

将align="center"添加到tbody

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72177987

复制

相似问题

问如何在引导表中居中文本？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导表中居中文本？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导表中居中文本？
EN