如何让div 中的 table 水平居中之 margin:auto

最新推荐文章于 2024-04-17 13:04:27 发布

小智大愚

最新推荐文章于 2024-04-17 13:04:27 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

分类专栏： web 前端文章标签： html css

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/108233347

web 前端专栏收录该内容

90 篇文章

订阅专栏

本文介绍了一种让div盒子中的内容实现水平居中的方法，通过设置text-align:center使文本居中，对于div内的table则使用margin:auto来达到居中效果。同时，提供了具体的代码示例，展示了如何在实际项目中应用这些CSS技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：让div 盒子中的内容水平居中的方法是：设置样式 text-align:center ，但是对于里面的table

问题解决：给table 设置属性 margin:auto

部分代码如下：

<div class="tablebox">
    <span>el-table 练习</span>
    <!-- :header-cell-style="{ background: '#eee' }" -->
    <el-form ref="addFormRef" :model="addRecordForm" :rules="addRecordForm.rules">
      <el-table :data="addRecordForm.tableData" style="width: 100%" :header-cell-style="rowCellClass" header-align="center" class="mytable">
        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
............................》》》》》》》》》》》》》

.tablebox {
  width: 100%;
  height: 100vh;
  text-align: center;
  padding: 50px;
  .el-table {
    margin: auto;
    width: 60% !important;
    margin-top: 20px;
  }
}