文档章节

【原创】还记得我们折腾过的居中么?

Mr.Zheng
 Mr.Zheng
发布于 2014/10/27 23:55
字数 594
阅读 258
收藏 39

虽然div中内容上下居中的问题已经是一个比较古老的话题,但是最近发现还是有很多前端开发者在询问如何实现。其实网络上已经有很多资料和案例了,我这里再总结一下几个比较常见的处理方式。

情形一:div限高,内容长度限一行

<style>
.v-align {
    margin: 0 auto;
    width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border: 1px solid #ddd;
}
</style>
<!-- html -->
<div class="v-align">我的内容只能有一行。</div>

valign_1

情形二:div限高,内容不限

.v-mult {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.v-mult .empty,
.v-mult .text {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
}
.v-mult .empty {
    height: 100%;
}
<!-- html -->
<div class="v-mult">
    <span class="empty"></span>
    <span class="text">我的内容不限,多高都行<br>换行照常</span>
</div>

valign_2

情形三:div高度不定,内容高度一定

.v-auto {
    position: relative;
    margin: 0 auto;
    width: 200px;
    border: 1px solid #ddd;
}
.v-auto .text {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    height: 100px;
    border: 1px dashed #ddd;
}
<!-- html -->
<div class="v-auto">
    <div class="text">
        我的高度是固定的,只有100px高,但是我的父及高度不定,我怎么垂直居中呢?
    </div>
    <br><br><br><br><br><br><br><br>
</div>

valign_3

情形四:div高度不定,内容高度不定

.v-auto-out {
    position: relative;
    margin: 0 auto;
    width: 200px;
    border: 1px solid #ddd;
}
.v-auto-out .auto-in {
    position: absolute;
    top: 50%;
    border: 1px dashed #ddd;
    /* 这里有兼容性问题 */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
<!-- html -->
<div class="v-auto-out">
    <div class="auto-in">我的高度不定,我的父及高度也不定,这下要上下居中,该如何是好?我们一起来瞧瞧吧。</div>
    <br><br><br><br><br><br><br><br><br>
</div>

valign_4

好了,知道这四种方式,我相信足以应对日常工作中的各种垂直居中问题。代码很简单,不再做多余阐述。总之一句话,CSS的各个属性样式,就好像人肢体的各个器官,了解了各个器官的功能,才能相互配合完成各种任务。相反,个体的能力是有限的。

作者博客:http://www.seejs.com

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
加载中

评论(1)

周百通
周百通
无需编程,免费定制,3分钟在线生成一个可以互动的移动社区客户端(安卓,苹果,wap),在线体验地址 www.opencom.cn
博客站点选择SqlServer数据库版本技巧及微信打赏插件分析[图]

首先和大家分享一个有趣的社会现象,也是关于IT行业的,对于技术方面来说,就不用多说了,这些年的进步和变化大家都有目共睹,虽然我只是一个技术小白,但是最近也开始不断的学习中。 自媒体...

原创小博客
2018/05/24
0
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
0
3
CSS实现元素水平/垂直居中的方法

首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}...

xiuhong
2014/05/06
0
0
极度郁闷,吐槽一下,今天被360搞了。。。

我老爸的电脑坏了,折腾我3个小时,没折腾好。估计硬盘有问题。其实这个和360没啥直接关系,但有因果关系。 起因是,老爸装了360。平时懒得帮他折腾电脑,我也眼不见为净。360那叫一个欢啊,...

中山野鬼
2012/09/02
7.3K
107
【Android开源库】图片文字居中的RadioButton

TabRadioButton for Android APP开发中,底部菜单经常使用RadioButton来实现切换,但使用系统自带的RadioButton的话,你会发现图片和文字并没有完全居中,于是就有了TabRadioButton。 TabRad...

这条鱼有点甜
2017/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
10
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
3
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部