文档章节

css 文字和div垂直居中

码农哲
 码农哲
发布于 2014/11/27 19:27
字数 355
阅读 18
收藏 0

1.单行文字垂直居中

单词文字居中比较简单,只要height和line-height相等即可,多余属性可以忽略

<div style="height:100px;width: 100px;background-color: #96A1E8;line-height:100px;">
    asdasdasd
</div>

2.多行文字垂直居中

可以用tabel+tabel-cell来实现

<div style="height:100px;width: 100px;background-color: #96A1E8;display: table;">
    <span style="display: table-cell;vertical-align: middle;">
    asdasdasdas
    asdasdasd
    </span>
</div>

3.div水平垂直居中

如果知道尺寸的话可以用负margin来实现

<div style="height: 100px;width: 100px;position:absolute;left: 50%;top: 50%;margin-top:-50px;margin-left:-50px;"></div>

这里还有种方法是用margin:auto

<div style="height: 100px;width: 100px;background-color: #000000;position:absolute;left: 0;top: 0;bottom:0;right:0;margin: auto;"></div>

如果用css3的话,可以用translate

<div style="height: 100px;width: 100px;position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"></div>

而且还可以用flexbox,flexbox可以做的事情很多,打算专门再总结一下,这里主要利用主轴和侧轴来实现居中

<div style="display: flex;flex-flow:row;align-items:center;justify-content:center;
width: 300px;height: 300px;background-color: #96A1E8;">
    <div style="width: 40px;height: 40px;background-color: #000000;"></div>
</div>

align-items是侧轴对齐,justify-conten是主轴对齐


© 著作权归作者所有

下一篇: js面试题回顾
码农哲
粉丝 10
博文 16
码字总数 8567
作品 0
南京
私信 提问
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.5K
0
DIV+CSS让文字垂直居中

也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...

晨曦之光
2012/05/16
184
1
css 实现单行文本 多行文本垂直居中

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是...

LorinLuo
2015/11/26
60
0
CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon
2014/08/18
0
0
css行高line-height的一些深入理解及应用

二、一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底...

manlianman
2013/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

group by分组后获得每组中时间最大的那条记录

用途: GROUP BY 语句用于 对一个或多个列对结果集进行分组。 例子: 原表: 现在,我们希望根据USER_ID 字段进行分组,那么,可使用 GROUP BY 语句。 我们使用下列 SQL 语句: SELECT ID,US...

豆花饭烧土豆
43分钟前
0
0
android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
53分钟前
3
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
今天
2
0
分布式数据一致性

狼王黄师傅
今天
2
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部