python控件布局常用三种方法,python定义了三种界面布局方式

　　文章转自有道云笔记转自csdn博客。如果有图片丢失的问题，可以阅读原文。

　　目录伸缩弹性框方法单行居中多行居中多列居中位置转换方法边距文本对齐摘要参考

　　居中布局是CSS中的老问题。相信大家在刚入门的时候都很烦恼。网上有很多关于居中布局的文章，由于每个人的场景不同，可能很难选择一种适合每个人的方法。

　　今天总结一下，就按得分排名，总分5分。

　　弹性盒法得分：5分

　　为什么把flex放在第一位？无论是水平居中还是垂直居中，单线多线，高度未知等等，Flex都能很好的适应解决这些问题，适用性最强。

　　使用flex布局来实现居中，主要关注两个属性：对齐内容和对齐项目。

　　单行HTML

　　广州/div/div CSS。容器{宽度：200px高度：100px背景色：浅绿色；显示器：flex！-水平居中-对齐-内容：居中！-垂直居中-对齐-项目：居中；}.项目{！-文本居中-文本对齐：居中；背景色：红色；}

　　多行居中的HTML

　　 container div class= item 广州/divdiv class=item 深圳/divdiv class=item 北京/div/div CSS。容器{宽度：200px高度：100px背景色：浅绿色；显示器：flex伸缩方向：列；对齐-内容：空间-均匀；对齐-项目：居中；}

　　多列居中的HTML

　　 container div class= item 广州/divdiv class=item 深圳/divdiv class=item 北京/div/div CSS。容器{宽度：200px高度：100px背景色：浅绿色；显示器：flexflex-wrap:行换行；-水平等比例均分-公正-内容：空间-均匀；-垂直居中-对齐-项目：居中；}.item {背景色：红色；文本对齐：居中；}

　　位置变换法得分：4分

　　优点：位置变换法可以很好地解决子元素宽度和高度未知时的居中问题，也适用于宽度和高度已知的情况。能满足水平和垂直对中的要求。

　　缺点：子元素使用绝对定位，会脱离文档流，所有子元素会重叠，要特别注意，多行不能居中。

　　在父元素中使用相对定位，在子元素中使用绝对定位，通过使用left和top，子元素相对于父元素偏移50%。然后通过transform将子元素向左上方偏移50%，最终达到居中效果。

　　超文本标记语言

　　广州/div/div CSS。容器{宽度：50%；身高：30%；背景色：浅绿色；位置：相对；}.儿童{背景色：红色；文本对齐：居中；位置：绝对；左：50%；top:50%；transform: translate(-50%，-50%)；}

　　保证金分数：3分

　　Margin:0 auto只能水平居中，但前提是知道子元素的宽度，垂直居中你无能为力。只能对块级子元素才能起作用。

　　超文本标记语言

　　广州/div/div CSS。孩子{！-必须设置子元素的宽度-宽度：50%；背景色：红色；文本对齐：居中；-Set-margin: 0auto on子元素；}

　　文本对齐得分：2分

　　文本对齐只能应用于行中元素的中心，而不能应用于块级元素。Text-align通常在块级元素上设置，以便块级元素内的行内元素居中。

　　超文本标记语言

　　广州集装箱有限公司。容器{宽度：200px背景色：浅绿色；文本对齐：居中；填充：10px}

　　关于以互联网为中心有很多详细的计划。因为计划太多，有时候会让我难以抉择。不知道哪个更合适。我认为以上四种对中方案适用于80%以上的常见场景，在开发中已经足够。

　　Flex Position Transform Margin:0 AutoText-AlignFlex布局和position + transform的布局对父元素的宽度和高度以及子元素的类型(块级、内嵌)没有特殊要求，建议先选择。

　　如果父元素是块级元素，子元素是行内元素(如文本标签、超链接等)。)，可以选择text-align居中。如果有felx布局，那就有点大材小用了。

　　有时候合理使用填充和边距属性也能达到居中的效果。

　　参考CSS居中完整指南CSS-Flex灵活布局注释

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。