最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法,

因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法:

display: -webkit-box;
/* 水平居中*/
-webkit-box-align: center;
/* 垂直居中 */
-webkit-box-pack: center;
/*flex需要写上,不写没作用*/
-webkit-box-flex: 1;

上面这种写法适合高度不固定的情况。

如果是css2中呢,普遍的写法是,适用于高度固定的情况:

/*水平居中*/
text-align:center
/*我们假设div的高度是50,设置line-height和height相同就可以实现垂直居中*/
line-height:50px;
height:50px;

关于DIV内文字垂直居中的写法的更多相关文章

  1. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  2. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

  4. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  5. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  6. [HTML]DIV+CSS 文字垂直居中

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

  7. div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

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

  8. 00002、div的文字垂直居中与背景的渐变

    1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...

  9. html框内文字垂直居中的方法

    由于无法知道框内文字的高度,很难确定垂直空间的位置.vertical-align:middle仅对td元素有效,无论单行和多行均可实现垂直居中.

随机推荐

  1. ChromiumFX

    序言 开发C#桌面应用程序有很多选择,比如WinForm或WPF. 这里我们用ChromiumFX. 目录 一.Centos7 从零编译Nginx+PHP+MySql 二.Centos7 从零配置Ng ...

  2. SQL Server2005修改计算机名后不能发布订阅

    在一台安装有SQL Server2005的计算机上,更改计算机名后,在发布订阅的时候提示如下错误报告: 由于需要需要配置一个发布订阅,可是一直报告:" sql server 复制需要有实际的 ...

  3. tfs2012安装

    今天正在配置tfs的服务器.要先安装net 3.5 ps1.要选择安装reportingservers 来启动报表功能.

  4. 来自SaberSama的HTML总结

    html 为什么要转过来呢? 因为我觉到,同样是一个初学者,应该互相学习,交流. html:是Hyper Text Markup Language的简写,即超文本标记语言. 网页的组成成分为HTML- ...

  5. 笨办法学Python(四)

    习题 4: 变量(variable)和命名 你已经学会了 print 和算术运算.下一步你要学的是“变量”.在编程中,变量只不过是用来指代某个东西的名字.程序员通过使用变量名可以让他们的程序读起来更像 ...

  6. simotion读写CF卡,保存/读取变量

    simotion读写CF卡功能 1 使用西门子的Simotion运动控制器时,有时需要用到 读/写 CF卡的功能.主要来自以下几个方面的需求. 1)用户数据量较大,可保持(retain)存储区的容量不 ...

  7. 【转载】#370 - Subscribe to an Event by Adding an Event Handle

    You subscribe to a particular event in C# by defining an event handler-code that will be called when ...

  8. LA 5031 图询问

    题目链接:https://vjudge.net/contest/159527#problem/A 题意:(求一个 图 中的连通分量中的 第 k 大) 一张图,n 个点,m 条边, 有一些操作: 删除 ...

  9. poj 3485 区间选点

    题目链接:http://poj.org/problem?id=3485 题意:X轴上公路从0到L,X轴上下有一些点给出坐标代表村庄,问在公路上最少建几个出口才能使每个村庄到出口的距离不超过D. 以村庄 ...

  10. 昂贵的聘礼,(最短路的应用),Poj(1063)

    题目链接:http://poj.org/problem?id=1062 很好的一道中文题. 思路: 把每种替换当做一条边,权重为交易优惠,就是求原点0到物品1的最短路. 这里有限制条件,每个节点还有等 ...