外部div宽度为100%，内部div宽度也为100%，内部div整体水平居中

missing_IT

于 2017-11-10 11:15:14 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/missing_IT/article/details/78497812

笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在Vue项目中，如何处理外部传入的table或其他元素，使其在宽度100%的情况下仍能水平居中显示。通过样式布局，即使不依赖具体的宽度信息，也能实现元素的居中对齐。

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

借鉴了别人的样式布局
在vue中，从外部传入一个table，但是没有提供宽度任何样式信息使传入的html整个标签居中,

 <div style="float: left; position: relative;left: 50%; ">
        <div style="position: relative;left: -50%" v-html="mytable"></div>
 </div>

传入的table

mytable="<table>
            <td>水果</td>
            <td>面包</td>
            <td>水果</td>
            <td>面包</td>
            <td>水果</td>
            <td>面包</td>
        </table>"

效果如图这里写图片描述
如果传入的是其他元素，如button，直接用text-align:center就可以居中