关于DIV内文字垂直居中的写法
最近在写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内文字垂直居中的写法的更多相关文章
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- css实现行内文字垂直居中
之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- div 内 图片 垂直居中
vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 00002、div的文字垂直居中与背景的渐变
1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...
- html框内文字垂直居中的方法
由于无法知道框内文字的高度,很难确定垂直空间的位置.vertical-align:middle仅对td元素有效,无论单行和多行均可实现垂直居中.
随机推荐
- int **a 和 int (*a)[]的区别
关于理论知识隔壁们的教程说的很详细了我就不多赘述了.我这边主要贴一段代码来看看这两种东西使用上的区别到底在哪. #include <stdio.h> int main(int argc, ...
- selenium学习备忘
在做web项目的自动化端到端测试时主要使用的是Selenium WebDriver来驱动浏览器.Selenium WebDriver的优点是支持的语言多,支持的浏览器多.主流的浏览器Chrome.Fi ...
- C#设计模式--抽象工厂模式(创建型模式)
一.抽象工厂模式: 在工厂模式中具体的产品和具体的工厂是一一对应的,一个工厂只能生产一种产品,结构单一,例如小米公司刚开始是只生产小米手机,但是伴随着公司的发展,他们需要生产不同型号的手机,也会生产路 ...
- NFS笔记(一)NFS服务器工作原理及详细配置
一.NFS工作原理 1.什么是NFS服务器 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不同的操作系统可以共享彼此的文件. NFS服务器可以让P ...
- MyEclipse 相关配置操作、问题处理及快捷键说明
MyEclipse傻瓜式安装不做介绍,试用期结束后破解操作见博客:MyEclipse 2014 破解补丁及激活步骤 以下为安装完MyEclipse后一般需要进行的一些配置,写来自己参考用.比较简陋,望 ...
- May 05th 2017 Week 18th Friday
No matter what have happened today, the sun will just rise in the morning of tomorrow. 无论今天发生了什么,明天早 ...
- 在ABAP里取得一个数据库表记录数的两种方法
方法1:使用函数EM_GET_NUMBER_OF_ENTRIES 这个函数使用起来很简单,只需要将想查询的数据库表名称维护进输入参数IT_TABLES: 上图说明这个函数支持批量操作,我查询的两张表名 ...
- 转载:手把手教你搭建 vue 环境
以下内容转自: https://segmentfault.com/a/1190000008922234 第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安 ...
- SSH连接linux时,长时间不操作就断开的解决方案(增强版)
1.第一次尝试失败 修改/etc/ssh/sshd_config文件, 找到 ClientAliveInterval 0 ClientAliveCountMax 3 并将注释符号("#&qu ...
- Google搜索引擎使用小技巧
相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...