转载

居中那些事情

居中那点事

最近碰到一些居中的问题需要处理，这里整理下碰到的问题以及一些解决的方案

文本水平居中

text-align:center;

可以知道，让一个元素水平居中可以使内容是inline或inline-block 非文本场景下，其实padding也可以实现相同效果。这个可以根据内容自适应，不然这样一来外层容器宽度就不固定了。

文本垂直居中

文本垂直居中单行的时候

line-height: 30px; height: 30px;

如果是多行，那么可以考虑这样子

padding: 30px 0;

这样上下间距一样了，多行无压力

图片居中

这里分几个场景 1 容器比较大，且容器和图片是固定了宽高的，那么用上面的思路很容易解决，内联+line-height或内联+padding

//css .wrap0 {     height: 300px;     width: 100%;     text-align: center;  }   .c0{     line-height: 300px;     display: inline-block; }

//dom <div class="wrap0">     <div class="c0">我好</div> </div>

2 容器比较大，但容器和图片宽高是不固定的，那么图片需要如何做自适应处理呢水平方向上，依然还是使用内联元素文本居中方式就可以实现。垂直方向上，其实可以想想如果是文本是否还有其他垂直居中方式，vertical-align，让行内元素居中对齐。考虑到这个其实还是会有些问题，vertical-align是多个元素的对齐方式，那么或许可以考虑让另一个元素隐藏起来就好。

//css   .wrap1 {     height: 100%;     width: 100%;     position: fixed;     text-align: center;  }      .c1 {     height: 100px;     width: 100px;     background-color: gray;     display: inline-block;     vertical-align: middle;  }  .c2 {      height: 100%;     background-color: green;     display: inline-block;     vertical-align: middle;     width: 0;  }

//dom <div class="wrap1">     <div class="c1"></div>     <div class="c2"></div>  </div>

3 容器比较小，而内容比较大，如何来做居中处理呢首先来看看水平方向上如何处理默认内容放置在容器中，内容和容器左边是对齐的，那么理论上是内层容器需要向左移动，才能实现对齐。现在的问题是需要移动多少呢

//考虑到方向 position = (width[容器] - width[内容])/2

其实就是他们宽度之差的1/2，那么剩下的问题是怎么做到移动这么多？常见的跟位置相关的样式有 top|left|right|bottom ， margin ， position ，且 left 和 margin 是基于父元素的，那么如果内容设置了 left 为50%，那么其实 width[容器]/2 的值就出来了，而如果要实现 width[内容]/2 ，只需要在内容外嵌套一个元素，这个元素和内容宽高一致，那么设置内容 margin-left 为50%，就可以实现了 width[内容]/2 ，考虑到公式是负值的，所以 margin-left 应为50% 上面说的有些绕，可以直接看代码

 .wrap1 {     height: 100px;     width: 200px;     margin: 0 auto;     text-align: center;     border: 1px solid red;     position: relative;  }       .wrap2 {     height: 100px;     width: 300px;     margin: 0 auto;     text-align: center;     border: 2px solid blue;     position: absolute;     left: 50%;  }      .c1 {     width: inherit;     height: inherit;     background-color: gray;     margin-left:-50%;   }

 <div class="wrap1">     <div class="wrap2">         <div class="c1"></div>     </div> </div>

这里留一个坑，如果c1元素是inline-block样式，会发生什么呢

同时，如果想在垂直方向上来实现这个效果，要这么做呢。很容易想到上面那种做法，可以动手试下看看。实际上是不行的，margin-top的值是基于父元素的宽度来计算的，而不是基于高度。所以。。。。我们也可以通过一些特殊的方式去改变计算方式。比如让margin根据父元素的高度去计算所以我们只需要在上面的wrap1样式中添加如下代码即可。

 -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */  writing-mode: tb-rl; /* for ie */

如果不采用这种样式，也可以使用js结合的方式去计算margin的值

多一点延伸的

其实提到按比例去计算位置，css3里面可以使用translate来配合使用，dom结构会更简洁，可悲的是万恶的ie8. 还是看看代码，先看看容器比内容大的场景：

 .wrap1 {     width: 200px;     height: 300px;     margin: 300px auto;     position: relative;     border: 1px solid red;  }       .c1 {    width: 100px;    height: 200px;    position: absolute;    top: 50%;    left: 50%;    background-color: gray;    -webkit-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);  }

<div class="wrap1">     <div class="c1"></div> </div>

上述代码在内容比容器大的时候照样适用

参考

css writing mode
margin系列之百分比

正文到此结束

所属分类：编程技术

本文标签： 自适应 DOM 代码 CSS 压力 js DDL web
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

居中那些事情

居中那点事

文本水平居中

文本垂直居中

图片居中

多一点延伸的

参考

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流