最近在写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. AOSP 源码整编单编

    <AOSP 源码下载>完成后,就可以开编了. 整编 整编,顾名思义就是编译整个 Android 源码,最终 out 目录会生成几个重要的镜像文件,其中有 system.img.userda ...

  2. Android内存监测工具使用

    用 Heap监测应用进程使用内存情况的步骤如下:1. 启动eclipse后,切换到DDMS透视图,并确认Devices视图.Heap视图都是打开的:2. 将手机通过USB链接至电脑,链接时需要确认手机 ...

  3. spring mvc踩坑记

    前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...

  4. selenium中Alter等弹出对话框的处理

    昨天使用selenium做自动化测试,发现部分页面会弹出alert对话框,找了写资料,大概的意思就是要给弹出的对话框做出相应,不然,后续的处理会失败. _driver.SwitchTo().Alert ...

  5. php的yii框架开发总结6

    MVC中的Controller部分,所有的controller类都是继承自Controller基类,基类里面包含actionAdmin-管理员,actionIndex-一般默认显示,actionVie ...

  6. IOS 纯代码添加 Button Image Label 添加到自定义View中

    @interface ViewController () /**获取.plist数据*/ @property (nonatomic,strong) NSArray *apps; @end @imple ...

  7. 整数N分解,搭积木,离散数学中的母函数,ZOJ(1163)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1163 解题报告: 将整数N分解为:两个及以上的不重复的整数,最流 ...

  8. [Pytorch] pytorch笔记 <二>

    pytorch笔记2 用到的关于plt的总结 plt.scatter scatter(x, y, s=None, c=None, marker=None, cmap=None, norm=None, ...

  9. 使用Sort方法对数组进行快速排序

    实现效果: 知识运用: Array类的Sort方法 public static void Sort(Array array)   // array:要排序的一维Array数组 实现代码: static ...

  10. MAC卸载/删除 Parallels Desktop虚拟机的方法

    一些MAC用户在自己的电脑上安装了虚拟机之后,想要将它卸载,但是不知道该怎么做.今天小编就为大家带来了这个问题的解决方法. 解决方案(删除/卸载虚拟机 (VM): 1.启动Parallels Desk ...