居中那些事情

居中那点事

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

文本水平居中

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|bottommarginposition,且leftmargin是基于父元素的,那么如果内容设置了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>

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

参考

  1. css writing mode
  2. margin系列之百分比

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏哲学驱动设计

小技巧 - 简化你的泛型API

    以下,我使用一个实例,分享一下用于简化泛型API设计的小技巧,“如何在泛型方法调用时,过滤掉可以隐式推断出的泛型参数”: 原有设计:     系统中原来...

1925
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(一)

首先跟大家简单唠叨两句为什么要学习正则表达式,为什么在网络爬虫的时候离不开正则表达式。正则表达式在处理字符串的时候扮演着非常重要的角色,在网络爬虫的时候也十分常...

1185
来自专栏企鹅号快讯

看完这篇文章我知道至少85%的人是没有入门Python的!花两周整理

以前刚学编程的时候就对Python略有耳闻,不过学校只有C,C++,Java,C#。和PHP有句"PHP是最好的语言" 这种家喻户晓的骚话一样,Python也有...

2167
来自专栏北京马哥教育

对Python老司机99%有帮助的简明语法总结乱编

本文由马哥教育Python实战开发班6期学员推荐,转载自互联网,作者为赖笔小新,感谢作者的辛苦付出和贡献。 最近发现进入python群的朋友都在你是如何自学py...

2767
来自专栏221-B

Python基础知识总结

首先,学一门语言都会问:点解要学这门语言? 而学Python的原因很简单,原因就是…..好鬼简单.(这句话不是我说的) 很喜欢Python极简的代码风格,以及众...

912
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

2747
来自专栏大闲人柴毛毛

三分钟理解“享元模式”——设计模式轻松掌握

享原模式的官方定义: 运用共享技术有效地支持大量细粒度的对象。 大白话讲: 一个类它可能生成好多对象,但这些对象根据属性值的不同一共分成N类,每种类型中属性值都...

33611
来自专栏WD学习记录

牛客网 python (1)

1. python my.py v1 v2 命令运行脚本,通过 from sys import argv如何获得v2的参数值? 

731
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(一)

首先跟大家简单唠叨两句为什么要学习正则表达式,为什么在网络爬虫的时候离不开正则表达式。正则表达式在处理字符串的时候扮演着非常重要的角色,在网络爬虫的时候...

452
来自专栏大数据挖掘DT机器学习

Python一些基础面试题目总结

1 Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一、对象的引用计数机制 pytho...

3286

扫码关注云+社区