最近在写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. Java中mouseDragged有效mouseMoved没响应的可能原因

    1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...

  2. 学习html5 app项目开发

    这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目.与其说是项目需要,其实更大部分是我自己想要做html5 app,因为我对这个全新的平台已经好奇很久了 ...

  3. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  4. [topcoder]SRM 633 DIV 2

    第一题,http://community.topcoder.com/stat?c=problem_statement&pm=13462&rd=16076 模拟就可以了. #includ ...

  5. SQLServer 2012 Ent 安装失败,另辟蹊径

    今天配到SqlServer2012 安装不了问题,总是NetFX3,然后一次挂了,然后VS2010 Shell也是个悲剧. 装了VS2010,可以了吧,总不能在不给力吧.但是有提示VS2010是打上s ...

  6. centos6.5_64bit-禅道安装及数据库操作

    linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...

  7. 命令行输入Jmeter提示不是内部或外部命令,处理方式:添加环境变量

    命令行输入Jmeter提示不是内部或外部命令,需要在环境变量path中添加jmeter的bin目录绝对路径 我的电脑 > 右击 >属性 > 高级系统变量 > 环境变量 > ...

  8. python 面向对象(一)--类(class)和实例(Instance)

    面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可 ...

  9. an exception occurred while initializing the database.

    对于手动删除本地的LocalDB数据库之后出现标题所示异常的,推荐下面的命令: sqllocaldb.exe stop v11.0 sqllocaldb.exe delete v11.0 在程序包管理 ...

  10. Spring 上下文操作工具类 ContextUtils

    ContextUtils.java package com.java.config; import org.springframework.beans.BeansException; import o ...