关于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元素有效,无论单行和多行均可实现垂直居中.
随机推荐
- python 不同目录间的模块调用
有时候调用的模块不再同一个目录.直接import 是加载不进来的.默认的加载路径是sys.path中指定的路径.如果要指定加载的目录得需要把这个目录加到sys.path里面. 比如要加载父目录的同级目 ...
- python模块详解 logging
打印日志的五个级别: import logging logging.debug('test debug') logging.info('test info') logging.warning('tes ...
- 类型信息(RTTI和反射)——RTTI
运行时类型信息可以让你在程序运行时发现和使用类型信息. 在Java中运行时识别对象和类的信息有两种方式:传统的RTTI,以及反射.下面就先来说下RTTI. 1.RTTI: RTTI:在运行时,识别一个 ...
- 初识QT中的qDebug()
首先在头文件中包含 #include<QDebug> 当开发者需要为一个装置.文件.字符串或者控制台,写出调试和跟踪信息时,该类被使用. 在需要使用的地方插入: qDebug(][]); ...
- 两次DFS,POJ(1481)
题目链接:http://poj.org/problem?id=1481 两次DFS,这里的思路是,没找到*,就说明,有一个骰子,因此,每搜索到一个*,深搜4个方向,并且变为'.',要是搜到'X',就是 ...
- Flashing Fluorescents(状压DP)
Flashing Fluorescents 时间限制: 1 Sec 内存限制: 128 MB提交: 56 解决: 19[提交] [状态] [讨论版] [命题人:admin] 题目描述 You ha ...
- caffe RandomOrderChannels
就是将rgb图的3个channel随机打乱顺序,给定一个概率值是否执行这个操作,v系列模型的概率一般都设置的为0 void RandomOrderChannels(const cv::Mat& ...
- Yarn下Map数控制
public List<InputSplit> getSplits(JobContext job) throws IOException { long minSize = Math.max ...
- LeetCode(Add Two Numbers)
一.题目要求 You are given two non-empty linked lists representing two non-negative integers. The digits a ...
- 旧文备份:安装cygwin及在console下输入和显示中文
1.下载Cygwin.exe文件,双击安装,首先在"Choose A Download Source"的时候选择"Download Without Installing& ...