MisShop居中效果实现技巧

居中:分水平居中,垂直居中。

需求环境:在大量的页面布局中,其显示效果经常需要一个元素相对于其父元素水平/垂直居中。而水平居中的使用需求最多。以水平居中为例。

DOM原理解释:
情况一:一段文字在一个dom中的水平位置。
(MisShop的默认控件中的文字,在默认控件中水平位置)
情况二:一个dom在父dom中的位置。
(MisShop的任意控件,在其父控件中的位置或者包裹层中的位置)

实现思路:
1、这个单元格是否有包裹层。如果有包裹层,包裹层占父控件的大小。
比如网格布局/表格布局/弹性布局中,默认有包裹层,那么单元格样式配置中的分栏宽度/分栏偏移,就是先决定包裹层的宽度及其位置。
2、这个单元格的宽度占比,在单元格样式中配置。
如果有包裹层,那么这个宽度就是相对于包裹层的
如果没有包裹层,那么这个宽度就是相对于父控件的
3、选择合适的配置,实现居中效果。

MisShop居中设置:
1、工具条中水平居中:
a、在表格/网格布局容器/弹性布局容器下,以及设置包裹层的控件,此功能用于设置控件在包裹层中的居中。
b、默认控件,设置文字居中
2、单元格样式-->包裹层中:
在单元格具备包裹层的情况下,可设置控件水平居中
3、单元格样式-->布局-->外边距(左)/右边距(右):
在单元格不具备包裹层的情况下,当设置外边距(左)/右边距(右)均为自动的情况下,
可设置控件在其父控件中的水平对齐
4、单元格样式-->xx容器元素-->分栏宽度/分栏偏移:
在弹性布局中,或者div容器下设置有包裹层的控件,
当设置分栏偏移,分栏宽度,计算后的右边空余相等时,也可实现水平居中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,345评论 0 5
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,572评论 0 8
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,670评论 0 0
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 4,258评论 0 1
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6