最近在写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. android三大组件之Intent

    Android 应用程序中有三大核心组件: Activity, Service, Broadcast Receiver 都是通过被称之为意图的消息运行. Intent messaging is a f ...

  2. centos部署vue项目

    参考链接 nodejs服务器部署教程二,把vue项目部署到线上 打包 #在本地使用以下命令,打包 npm run build #打包之后本地会出现dist文件夹.将dist文件夹以及package.j ...

  3. Cholesky分解(Cholesky decomposition / Cholesky )

    Cholesky decomposition In linear algebra, the Cholesky decomposition or Cholesky is a decomposition ...

  4. yum 源搭建

    RHEL系统部署网络yum源 配置网络yum源 RHEL系统本身光盘做成的yum源所提供的软件包有限,在实际使用过程中经常会出现缺包的现象,本文中以CentOS源作为替代,CentOS的软件包和RHE ...

  5. node 上的cookie的签名和解签名

    cookie签名的原因是防止别人篡改cookie原本的值,如果这个过程中cookie被改变的话,就会在unsign方法返回false 代码: var cookie = require("co ...

  6. Codeforces Codeforces Round #383 (Div. 2) E (DFS染色)

    题目链接:http://codeforces.com/contest/742/problem/E 题意: 有一个环形的桌子,一共有n对情侣,2n个人,一共有两种菜. 现在让你输出一种方案,满足以下要求 ...

  7. 如何将Win7做为NTP服务器

    1. 修改注册表项    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer   ...

  8. 5.2 Array类型

    ◆  创建数组的基本方式有两种. ①第一种是使用Array构造函数,new关键字可省略 var colors = new Array(); var colors = new Array(20); // ...

  9. Fluent经典问题答疑

    原文链接1 原文链接28 什么叫边界条件?有何物理意义?它与初始条件有什么关系? 边界条件与初始条件是控制方程有确定解的前提. 边界条件是在求解区域的边界上所求解的变量或其导数随时间和地点的变化规律. ...

  10. ajax实现分页页签

    在一些搜索列表的页面中,我们会遇到一些需要处理页签的需求,一般这样的页面,要么是在JSP中处理,每次都跳页.这样做是个很方便的方法.但是如果页面上有很多和列表无关,每次都需要重新渲染是不是显得慢了一些 ...